import { useState } from 'react';
import { Story, Meta } from '@storybook/react';
import type { TextFieldProps } from '@mui/material/TextField';

import { RangeField } from './range-field';
import type { RangeFieldProps } from './range-field';

export default {
  component: RangeField,
  title: 'Table/Out Of Cells/Column Header',
  argTypes: {
    fromFieldProps: {
      description: 'Props which will be passed into the `from` field.'
    },
    toFieldProps: {
      description: 'Props which will be passed into the `to` field.'
    }
  }
} as Meta;

const Template: Story<RangeFieldProps> = (args) => {
  const [fromField, setFromField] = useState(args.fromFieldProps?.value);
  const [toField, setToField] = useState(args.toFieldProps?.value);

  const handleFieldChange =
    (field: string): TextFieldProps['onChange'] =>
    (e) => {
      const setFunction = field === 'from' ? setFromField : setToField;
      setFunction(e.target.value);
    };

  const handleClear = () => {
    setFromField('');
    setToField('');
  };

  return (
    <RangeField
      handleClear={handleClear}
      fromFieldProps={{
        ...args.fromFieldProps,
        value: fromField,
        onChange: handleFieldChange('from')
      }}
      toFieldProps={{
        ...args.toFieldProps,
        value: toField,
        onChange: handleFieldChange('to')
      }}
    />
  );
};

export const FromTo = Template.bind({});
FromTo.args = {
  fromFieldProps: {
    placeholder: 'From',
    value: ''
  },
  toFieldProps: {
    placeholder: 'To',
    value: ''
  }
};