import { Story, Meta } from '@storybook/react';

import SelectText from './SelectText';
import { Option } from './../Select/Select';
import Block from '../../atoms/Block';

import { DotMark16 } from '@carbon/icons-react';

export default {
  title: 'Component/Elements/SelectText',
  component: SelectText,
  parameters: {
    component: SelectText,
    previewTabs: {
      canvas: {
        hidden: true,
      },
    },
    viewMode: 'docs',
  },
} as Meta;

interface ExampleProps {
  children: React.ReactNode;
  classes: string;
}

const options: Option<string>[] = [
  {
    value: 'yellow',
    label: 'Yellow',
    icon: <DotMark16 className="text-yellow-700" />,
  },
  {
    value: 'blue',
    label: 'Blue',
    icon: <DotMark16 className="text-blue-700" />,
  },
  {
    value: 'green',
    label: 'Green',
    icon: <DotMark16 className="text-green-700" />,
  },
  {
    value: 'pink',
    label: 'Pink',
    icon: <DotMark16 className="text-pink-700" />,
  },
  {
    value: 'purple',
    label: 'Purple',
    icon: <DotMark16 className="text-purple-700" />,
  },
  {
    value: 'orange',
    label: 'Orange',
    icon: <DotMark16 className="text-orange-700" />,
  },
  {
    value: 'gray',
    label: 'Gray',
    icon: <DotMark16 className="text-gray-700" />,
  },
  {
    value: 'indigo',
    label: 'Indigo',
    icon: <DotMark16 className="text-yellow-700" />,
  },
  {
    value: 'white',
    label: 'White',
    icon: <DotMark16 className="text-white" />,
  },
  {
    value: 'magenta',
    label: 'Magenta',
    icon: <DotMark16 className="text-pink-700" />,
  },
];

const Template: Story = (args) => <SelectText {...args} value={options[0]} options={options}></SelectText>;

const Example: Story<ExampleProps> = (args) => {
  const classes = args.classes;
  return classes ? <Block className={args.classes}>{args.children}</Block> : <>{args.children}</>;
};

export const Properties = Template.bind({});
Properties.args = {};

export const Types = Example.bind({});
Types.args = {
  children: (
    <SelectText
      label="Label text"
      message="Warning message Warning message Warning message "
      value={options[0]}
      options={options}
    ></SelectText>
  ),
  classes: 'flex items-start w-full h-64 space-x-6',
};
