import { useState } from 'react';
import type { Meta } from '@storybook/react';

import { Label } from '../label';
import { Select } from './select';

export default {
  title: 'Components/Select',
  parameters: {
    backgrounds: { default: 'gray' },
  },
} as Meta<typeof Select.Container>;

export const Example = () => {
  return (
    <Select.Container>
      <Select.Item value="react">React</Select.Item>
      <Select.Item value="vue">Vue</Select.Item>
      <Select.Item value="svelte">Svelte</Select.Item>
      <Select.Item value="angular">Angular</Select.Item>
    </Select.Container>
  );
};

export const Uncontrolled = () => {
  return (
    <Select.Container>
      <Select.Item value="react">React</Select.Item>
      <Select.Item value="vue">Vue</Select.Item>
      <Select.Item value="svelte">Svelte</Select.Item>
      <Select.Item value="angular">Angular</Select.Item>
    </Select.Container>
  );
};

export const Controlled = () => {
  const [value, setValue] = useState('react');

  return (
    <Select.Container value={value} onValueChange={setValue}>
      <Select.Item value="react">React</Select.Item>
      <Select.Item value="vue">Vue</Select.Item>
      <Select.Item value="svelte">Svelte</Select.Item>
      <Select.Item value="angular">Angular</Select.Item>
    </Select.Container>
  );
};

export const WithLabel = () => {
  const [value, setValue] = useState('react');

  return (
    <div style={{ display: 'flex', marginTop: '0.5rem', flexDirection: 'column', alignItems: 'flex-start' }}>
      <Label htmlFor="with-label-c1">Select framework</Label>
      <Select.Container id="with-label-c1" value={value} onValueChange={setValue}>
        <Select.Item value="react">React</Select.Item>
        <Select.Item value="vue">Vue</Select.Item>
        <Select.Item value="svelte">Svelte</Select.Item>
        <Select.Item value="angular">Angular</Select.Item>
      </Select.Container>
    </div>
  );
};

export const Disabled = () => {
  return (
    <Select.Container disabled>
      <Select.Item value="react">React</Select.Item>
      <Select.Item value="vue">Vue</Select.Item>
      <Select.Item value="svelte">Svelte</Select.Item>
      <Select.Item value="angular">Angular</Select.Item>
    </Select.Container>
  );
};
