import { Avatar, Badge, SelectInput, Text } from '@based/ui'
import { useState } from 'react'

export const meta: Based.UI.Extractor.MetaDescriptor = {
  name: 'Select Input',
  group: 'Inputs',
  section: 'components',
  icon: 'edit',
  component: SelectInput,
  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: 'String',
    type: 'component',
    description: 'SelectInput for string values.',
    style: {
      frame: false,
      size: 'small',
      flex: {
        alignItems: 'center',
        justifyContent: 'center',
      },
    },
    render: () => {
      const [value, setValue] = useState<string>()
      return (
        <div
          style={{
            width: 360,
          }}
        >
          <SelectInput
            value={value}
            onChange={(value) => {
              setValue(value as string)
            }}
            options={[
              { label: 'High', value: 'high' },
              { label: 'Medium', value: 'medium' },
              { label: 'Low', value: 'low' },
            ]}
            placeholder="Pick option"
          />
        </div>
      )
    },
  },
  {
    name: 'Number',
    type: 'component',
    description: 'SelectInput for number values.',
    style: {
      frame: false,
      size: 'small',
      flex: {
        alignItems: 'center',
        justifyContent: 'center',
      },
    },
    render: () => {
      const [value, setValue] = useState<number>()
      return (
        <div
          style={{
            width: 360,
          }}
        >
          <SelectInput
            value={value}
            onChange={(value) => {
              setValue(value as number)
            }}
            options={[
              { label: '0', value: 0 },
              { label: '1', value: 1 },
              { label: '2', value: 2 },
            ]}
            placeholder="Pick option"
          />
        </div>
      )
    },
  },
  {
    name: 'Boolean',
    type: 'component',
    description: 'SelectInput for boolean values.',
    style: {
      frame: false,
      size: 'small',
      flex: {
        alignItems: 'center',
        justifyContent: 'center',
      },
    },
    render: () => {
      const [value, setValue] = useState<boolean>()
      return (
        <div
          style={{
            width: 360,
          }}
        >
          <SelectInput
            value={value}
            onChange={(value) => {
              setValue(value as boolean)
            }}
            options={[
              { label: 'True', value: true },
              { label: 'False', value: false },
            ]}
            placeholder="Pick option"
          />
        </div>
      )
    },
  },
  {
    name: 'String with lead icon',
    type: 'component',
    description: 'String SelectInput with lead icon.',
    style: {
      frame: false,
      size: 'small',
      flex: {
        alignItems: 'center',
        justifyContent: 'center',
      },
    },
    render: () => {
      const [value, setValue] = useState<string>()
      return (
        <div
          style={{
            width: 360,
          }}
        >
          <SelectInput
            value={value}
            onChange={(value) => {
              setValue(value as string)
            }}
            leadIcon="settings"
            options={[
              { label: 'Automatic', value: 'auto' },
              { label: 'Manual', value: 'manual' },
            ]}
            placeholder="Pick option"
          />
        </div>
      )
    },
  },
  {
    name: 'Custom label badge',
    type: 'component',
    description: 'SelectInput with custom label using Badge.',
    style: {
      frame: false,
      size: 'small',
      flex: {
        alignItems: 'center',
        justifyContent: 'center',
      },
    },
    render: () => {
      const [value, setValue] = useState<string>()
      return (
        <div
          style={{
            width: 360,
          }}
        >
          <SelectInput
            value={value}
            onChange={(value) => {
              setValue(value as string)
            }}
            options={[
              {
                label: (
                  <Badge color="green-subtle" leadIcon="settings">
                    Live
                  </Badge>
                ),
                value: 'live',
                labelFilterText: 'Live',
              },
              {
                label: (
                  <Badge color="blue-subtle" leadIcon="date">
                    Scheduled
                  </Badge>
                ),
                value: 'scheduled',
                labelFilterText: 'Scheduled',
              },
              {
                label: (
                  <Badge color="red-subtle" leadIcon="close">
                    Canceled
                  </Badge>
                ),
                value: 'canceled',
                labelFilterText: 'Canceled',
              },
            ]}
            placeholder="Pick option"
          />
        </div>
      )
    },
  },
  {
    name: 'Filterable custom label avatar',
    type: 'component',
    description: 'Filterable SelectInput with custom label using Avatar.',
    style: {
      frame: false,
      size: 'small',
      flex: {
        alignItems: 'center',
        justifyContent: 'center',
      },
    },
    render: () => {
      const [value, setValue] = useState<string>()
      return (
        <div
          style={{
            width: 360,
          }}
        >
          <SelectInput
            filterable
            value={value}
            onChange={(value) => {
              setValue(value as string)
            }}
            options={[
              {
                label: (
                  <div
                    style={{ display: 'flex', gap: 4, alignItems: 'center' }}
                  >
                    <Avatar
                      size="small"
                      src="https://public.linear.app/9fa6f7a2-5e7d-4fb8-af60-d35ba4592b2c/2bd65f8b-2f43-4b01-95fb-170bdd1a1280/368af3c7-dc76-4729-a5a6-3809399c312a"
                    />
                    <Text variant="display-medium" color="inherit">
                      Bence
                    </Text>
                  </div>
                ),
                value: 'bence',
                labelFilterText: 'Bence',
              },
              {
                label: (
                  <div
                    style={{ display: 'flex', gap: 4, alignItems: 'center' }}
                  >
                    <Avatar
                      size="small"
                      src="https://public.linear.app/9fa6f7a2-5e7d-4fb8-af60-d35ba4592b2c/d14d4591-6cc5-4afc-8c47-c384475b5de2/16cd9278-4497-41fa-8ec2-5de1dfc2c5ad"
                    />
                    <Text variant="display-medium" color="inherit">
                      Sandor
                    </Text>
                  </div>
                ),
                value: 'sandor',
                labelFilterText: 'Sandor',
              },
              {
                label: (
                  <div
                    style={{ display: 'flex', gap: 4, alignItems: 'center' }}
                  >
                    <Avatar
                      size="small"
                      src="https://public.linear.app/9fa6f7a2-5e7d-4fb8-af60-d35ba4592b2c/41852f88-0893-4ae8-9226-8e408e509d72/fbab7a12-7958-4183-babe-bdfd4a70d56e"
                    />
                    <Text variant="display-medium" color="inherit">
                      Victor
                    </Text>
                  </div>
                ),
                value: 'victor',
                labelFilterText: 'Victor',
              },
            ]}
            placeholder="Assignee"
          />
        </div>
      )
    },
  },
  {
    name: 'Error',
    type: 'component',
    description: 'SelectInput with error state.',
    style: {
      frame: false,
      size: 'small',
      flex: {
        alignItems: 'center',
        justifyContent: 'center',
      },
    },
    render: () => {
      const [value, setValue] = useState<string>()
      return (
        <div
          style={{
            width: 360,
          }}
        >
          <SelectInput
            error
            value={value}
            onChange={(value) => {
              setValue(value as string)
            }}
            options={[
              { label: 'Automatic', value: 'auto' },
              { label: 'Manual', value: 'manual' },
            ]}
            placeholder="Something went wrong."
          />
        </div>
      )
    },
  },
  {
    name: 'Disabled',
    type: 'component',
    description: 'Disabled SelectInput.',
    style: {
      frame: false,
      size: 'small',
      flex: {
        alignItems: 'center',
        justifyContent: 'center',
      },
    },
    render: () => {
      const [value, setValue] = useState<string>()
      return (
        <div
          style={{
            width: 360,
          }}
        >
          <SelectInput
            value={value}
            onChange={(value) => {
              setValue(value as string)
            }}
            disabled
            options={[
              { label: 'Automatic', value: 'auto' },
              { label: 'Manual', value: 'manual' },
            ]}
            placeholder="Pick option"
          />
        </div>
      )
    },
  },
]
