import 'frontend-shared-icons/dist/style.css';

import React, { useState } from 'react';

import { ComponentMeta, ComponentStory } from '@storybook/react';

import { Input } from './Input';
import { THEME } from '../../constants';
import { INPUT_VARIANT } from './types';

export default {
  title: 'ReactComponentLibrary/Input',
  component: Input,
  decorators: [(Story): JSX.Element => <Story />],
} as ComponentMeta<typeof Input>;

const Template: ComponentStory<typeof Input> = (args) => {
  const [value, setValue] = useState(args.value);

  return (
    <div className="centered-layout">
      <Input
        {...args}
        value={value}
        onChange={(event): void => setValue(event.target.value)}
        onClearClick={(): void => setValue('')}
      />
    </div>
  );
};

export const LightDisabled = Template.bind({});
LightDisabled.args = {
  disabled: true,
  value: '',
  placeholder: 'Disabled',
  theme: THEME.light,
  icon: 'search',
};

export const LightWithValue = Template.bind({});
LightWithValue.args = {
  value: 'Value',
  theme: THEME.light,
};

export const LightWithError = Template.bind({});
LightWithError.args = {
  value: '123',
  error: 'Error message',
  theme: THEME.light,
};

export const LightWithPlaceholder = Template.bind({});
LightWithPlaceholder.args = {
  placeholder: 'Type...',
  theme: THEME.light,
};

export const LightWithIcon = Template.bind({});
LightWithIcon.args = {
  placeholder: 'Type...',
  icon: 'search',
  theme: THEME.light,
};

export const LightWithClear = Template.bind({});
LightWithClear.args = {
  placeholder: 'Type...',
  value: 'Test value',
  icon: 'search',
  isClearable: true,
  theme: THEME.light,
};

export const LightWithLabel = Template.bind({});
LightWithLabel.args = {
  label: 'Test label',
  icon: 'search',
  isClearable: true,
  theme: THEME.light,
};

export const LightCompact = Template.bind({});
LightCompact.args = {
  value: 'Test value',
  variant: INPUT_VARIANT.compact,
  theme: THEME.light,
};

export const DarkDisabled = Template.bind({});
DarkDisabled.args = {
  disabled: true,
  value: '',
  placeholder: 'Disabled',
  theme: THEME.dark,
  icon: 'search',
};
DarkDisabled.parameters = {
  backgrounds: { default: 'dark' },
};

export const DarkWithValue = Template.bind({});
DarkWithValue.args = {
  value: 'Value',
  theme: THEME.dark,
};
DarkWithValue.parameters = {
  backgrounds: { default: 'dark' },
};

export const DarkWithError = Template.bind({});
DarkWithError.args = {
  value: '123',
  error: 'Error message',
  theme: THEME.dark,
};
DarkWithError.parameters = {
  backgrounds: { default: 'dark' },
};

export const DarkWithPlaceholder = Template.bind({});
DarkWithPlaceholder.args = {
  placeholder: 'Type...',
  theme: THEME.dark,
};
DarkWithPlaceholder.parameters = {
  backgrounds: { default: 'dark' },
};

export const DarkWithIcon = Template.bind({});
DarkWithIcon.args = {
  placeholder: 'Type...',
  icon: 'search',
  theme: THEME.dark,
};
DarkWithIcon.parameters = {
  backgrounds: { default: 'dark' },
};

export const DarkWithClear = Template.bind({});
DarkWithClear.args = {
  placeholder: 'Type...',
  value: 'Test value',
  icon: 'search',
  isClearable: true,
  theme: THEME.dark,
};
DarkWithClear.parameters = {
  backgrounds: { default: 'dark' },
};

export const DarkWithLabel = Template.bind({});
DarkWithLabel.args = {
  label: 'Test label',
  icon: 'search',
  isClearable: true,
  theme: THEME.dark,
};
DarkWithLabel.parameters = {
  backgrounds: { default: 'dark' },
};

export const DarkCompact = Template.bind({});
DarkCompact.args = {
  value: 'Test value',
  variant: INPUT_VARIANT.compact,
  theme: THEME.dark,
};
DarkCompact.parameters = {
  backgrounds: { default: 'dark' },
};