import { Tutorial } from '@freesewing/tutorial'
import { Examples } from '@freesewing/examples'
import Svg from '../workbench/draft/svg'
import Defs from '../workbench/draft/defs'
import Stack from '../workbench/draft/stack'
import { useGist } from 'shared/hooks/useGist'
import Md from 'react-markdown'

//const measurementSets = {
//  tutorial: {
//    head: 320,
//  },
//}
const ExamplesComponent = ({ app, part, caption, xray }) => {
  // State for gist
  const { gist, unsetGist, updateGist } = useGist('examples-mdx', app)

  if (xray) {
    gist._state.xray = { enabled: true }
    gist.margin = 20
  }

  //const measurements = part.includes('tutorial') ? measurementSets.tutorial : {}
  const pattern = Examples
  const draft = new pattern({
    only: [`examples.${part}`],
    measurements: {},
  })
  const patternProps = draft.draft().getRenderProps()
  console.log(patternProps)
  if (draft.store.logs.error.length > 0 || draft.setStores[0].logs.error.length > 0)
    return (
      <div className="max-w-full p-4">
        <pre>{draft.store.logs.error.join('\n')}</pre>
        <pre>{draft.setStores[0].logs.error.join('\n')}</pre>
      </div>
    )

  return (
    <div className="my-8">
      <Svg {...patternProps} embed={true}>
        <Defs {...patternProps} />
        <style>{`:root { --pattern-scale: 1} ${patternProps.svg.style}`}</style>
        <g>
          {Object.keys(patternProps.stacks).map((stackName) => (
            <Stack
              {...{ app, gist, updateGist, unsetGist, patternProps }}
              showInfo={app.setPopup}
              key={stackName}
              stackName={stackName}
              stack={patternProps.stacks[stackName]}
            />
          ))}
        </g>
      </Svg>
      {caption && (
        <div className="text-center italic -mt-4">
          <Md>{caption}</Md>
        </div>
      )}
    </div>
  )
}

export default ExamplesComponent