import { useTranslation } from 'next-i18next'
import { CutLayoutSettings } from './settings.mjs'
import { Draft } from '../draft/index.mjs'
import { fabricPlugin } from '../layout-part-plugin.mjs'
import { useEffect } from 'react'

export const CutLayout = (props) => {
  const { t } = useTranslation(['workbench'])

  // disable xray
  useEffect(() => {
    if (props.gist?._state?.xray?.enabled) props.updateGist(['_state', 'xray', 'enabled'], false)
  })

  const draft = props.draft

  // add the pages plugin to the draft
  const layoutSettings = {
    sheetWidth: 500,
    sheetHeight: 1000,
    ...props.gist?._state?.layout?.forCutting?.fabric,
  }

  draft.use(fabricPlugin(layoutSettings))

  let patternProps
  try {
    // draft the pattern
    draft.draft()
    patternProps = draft.getRenderProps()
  } catch (err) {
    console.log(err, props.gist)
  }
  const bgProps = { fill: 'url(#page)' }

  let name = props.design.designConfig.data.name
  name = name.replace('@freesewing/', '')
  return (
    <div>
      <h2 className="capitalize">{t('layoutThing', { thing: name }) + ': ' + t('forCutting')}</h2>
      <CutLayoutSettings {...props} />
      <Draft
        draft={draft}
        gist={props.gist}
        updateGist={props.updateGist}
        patternProps={patternProps}
        bgProps={bgProps}
        gistReady={props.gistReady}
        layoutPart="fabric"
        layoutType="cuttingLayout"
      />
    </div>
  )
}