import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Container } from 'components/layout';
import { textVariantList } from 'components/text/Text';
import { useState } from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { BrowserRouter } from 'react-router-dom';
import { colors } from 'theme/color';
import { Dropdown } from './index';

export default {
  title: 'Design System/Dropdown',
  component: Dropdown,
  argTypes: {
    isActive: {
      control: { type: 'boolean' },
    },
    titleColor: {
      options: colors,
      control: { type: 'select' },
    },
    variant: {
      options: ['plain', 'outline', 'float'],
      control: { type: 'select' },
    },
    dropDownListPositionVariant: {
      options: ['relative', 'float'],
      control: { type: 'select' },
    },
    sizeVariant: {
      options: ['extra-small', 'small', 'medium', 'large', 'extra-large', 'content'],
      control: { type: 'select' },
    },
    titleVariant: {
      options: textVariantList,
      control: { type: 'select' },
    },
    captionColorVariant: {
      options: colors,
      control: { type: 'select' },
    },
  },
} as ComponentMeta<typeof Dropdown>;

export const Interactive: ComponentStory<typeof Dropdown> = ({ onChangeValue, value, ...args }) => {
  const [input, setInput] = useState('Prod');
  return (
    <BrowserRouter>
      <SafeAreaProvider>
        <Container height={250}>
          <Dropdown onChangeValue={setInput} value={input} {...args} />
        </Container>
      </SafeAreaProvider>
    </BrowserRouter>
  );
};

Interactive.args = {
  placeholder: 'Please select env',
  variant: 'outline',
  titleColor: 'body',
  sizeVariant: 'large',
  dropdownVariant: 'text',
  dropDownListPositionVariant: 'relative',
  dropdownHeight: 130,
  caption: '',
  captionColorVariant: 'body',
  label: '',
  labelColorVariant: 'body',
  items: ['Prod', 'Dev', 'Local'],
  value: 'Prod',
};