import {
  SwitchInput,
  TEXT_VARIANT_STYLES,
  Text,
  type TextVariant,
  measureTextWidth,
} from '@based/ui'
import { useState } from 'react'

export const meta: Based.UI.Extractor.MetaDescriptor = {
  name: 'Text',
  group: 'Primitives',
  section: 'components',
  icon: 'edit',
  component: Text,
  subtitle:
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
  showApi: true,
  showUsage: true,
}

export const blocks: Based.UI.Extractor.BlocksDescriptor[] = [
  {
    name: 'Default',
    type: 'component',
    description: 'Et harum quidem rerum facilis est et expedita distinctio.',
    style: {
      size: '100%',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => {
      const [debug, setDebug] = useState(false)

      return (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <SwitchInput
            value={debug}
            onChange={setDebug}
            label="Overlay canvas calculated text width"
          />
          {Object.keys(TEXT_VARIANT_STYLES).map((variant) => (
            <div
              key={variant}
              style={{
                position: 'relative',
              }}
            >
              {debug && (
                <div
                  style={{
                    position: 'absolute',
                    background: 'red',
                    width: measureTextWidth(
                      'The quick brown fox jumps over the dog.',
                      variant as TextVariant,
                    ),
                    height: '100%',
                  }}
                />
              )}
              <Text variant={variant as TextVariant}>
                The quick brown fox jumps over the dog.
              </Text>
            </div>
          ))}
        </div>
      )
    },
  },
]
