import { TextInput } from '@based/ui'
import { useState } from 'react'

export const meta: Based.UI.Extractor.MetaDescriptor = {
  name: 'Text Input',
  group: 'Inputs',
  section: 'components',
  icon: 'edit',
  component: TextInput,
  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: 'Default TextInput with lead icon and prefix.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => {
      const [value, setValue] = useState('')
      return (
        <div
          style={{
            width: 360,
          }}
        >
          <TextInput
            value={value}
            onChange={setValue}
            placeholder="Add text here"
          />
        </div>
      )
    },
  },
  {
    name: 'Ghost',
    type: 'component',
    description: 'TextInput with ghost variant.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => {
      const [value, setValue] = useState('')
      return (
        <div
          style={{
            width: 360,
          }}
        >
          <TextInput
            variant="ghost"
            value={value}
            onChange={setValue}
            leadIcon="search"
            placeholder="Find items..."
          />
        </div>
      )
    },
  },
  {
    name: 'Ghost small',
    type: 'component',
    description: 'Small TextInput with ghost variant.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => {
      const [value, setValue] = useState('')
      return (
        <div
          style={{
            width: 360,
          }}
        >
          <TextInput
            variant="ghost"
            size="small"
            value={value}
            onChange={setValue}
            leadIcon="search"
            placeholder="Find items..."
          />
        </div>
      )
    },
  },
  {
    name: 'Ghost disabled',
    type: 'component',
    description: 'Disabled TextInput with ghost variant.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => {
      const [value, setValue] = useState('')
      return (
        <div
          style={{
            width: 360,
          }}
        >
          <TextInput
            disabled
            variant="ghost"
            value={value}
            onChange={setValue}
            leadIcon="search"
            placeholder="Find items..."
          />
        </div>
      )
    },
  },
  {
    name: 'Disabled',
    type: 'component',
    description: 'Disabled TextInput.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => {
      const [value, setValue] = useState('')
      return (
        <div
          style={{
            width: 360,
          }}
        >
          <TextInput
            value={value}
            onChange={setValue}
            placeholder="Add text here"
            disabled
          />
        </div>
      )
    },
  },
  {
    name: 'Error',
    type: 'component',
    description: 'TextInput with error state.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => {
      const [value, setValue] = useState('')
      return (
        <div
          style={{
            width: 360,
          }}
        >
          <TextInput
            value={value}
            onChange={setValue}
            placeholder="Something went wrong."
            error
          />
        </div>
      )
    },
  },
  {
    name: 'Clearable',
    type: 'component',
    description: 'TextInput with clearable option.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => {
      const [value, setValue] = useState('based.io')
      return (
        <div
          style={{
            width: 360,
          }}
        >
          <TextInput
            value={value}
            onChange={setValue}
            leadIcon="link"
            prefix="https://"
            placeholder="address.io"
            clearable
          />
        </div>
      )
    },
  },
  {
    name: 'Max length',
    type: 'component',
    description: 'TextInput with max length of 10 characters.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => {
      const [value, setValue] = useState('')
      return (
        <div
          style={{
            width: 360,
          }}
        >
          <TextInput
            value={value}
            onChange={setValue}
            placeholder="Add profile handle"
            maxLength={10}
          />
        </div>
      )
    },
  },
  {
    name: 'Suffix',
    type: 'component',
    description: 'TextInput with a suffix.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => {
      const [value, setValue] = useState('')
      return (
        <div
          style={{
            width: 360,
          }}
        >
          <TextInput
            value={value}
            onChange={setValue}
            suffix="@once.net"
            placeholder="Add email address"
          />
        </div>
      )
    },
  },
  {
    name: 'KeyHint',
    type: 'component',
    description: 'TextInput with a key hint.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => {
      const [value, setValue] = useState('')
      return (
        <div
          style={{
            width: 360,
          }}
        >
          <TextInput
            value={value}
            onChange={setValue}
            leadIcon="search"
            placeholder="Find anything..."
            keyHint="Cmd+K"
          />
        </div>
      )
    },
  },
]
