import { Collapse, Radio, Typography } from 'antd';
import type { RadioChangeEvent } from 'antd';
import { BaseTabProps } from './index';

interface SettingsProps {
  setProp: (cb: (props: BaseTabProps) => void) => void;
  [key: string]: any;
}

export const Settings = ({ setProp, ...props }: SettingsProps) => {
  return (
    <>
      <Typography.Title level={3}>Tabs Settings</Typography.Title>
      <Collapse activeKey={['1', '2']}>
        <Collapse.Panel header="Tabs Size" key={'1'}>
          <Radio.Group
            value={props.size}
            onChange={(e: RadioChangeEvent) => {
              setProp((props: BaseTabProps) => {
                props.size = e.target.value;
                return props;
              });
            }}
          >
            <Radio value={'large'}>Large</Radio>
            <Radio value={'middle'}>Middle</Radio>
            <Radio value={'small'}>Small</Radio>
          </Radio.Group>
        </Collapse.Panel>
        <Collapse.Panel header="Tabs Position" key={'2'}>
          <Radio.Group
            block
            value={props.tabPosition}
            onChange={(e: RadioChangeEvent) =>
              setProp((props: BaseTabProps) => {
                props.tabPosition = e.target.value;
                return props;
              })
            }
          >
            <Radio.Button value={'top'}>Top</Radio.Button>
            <Radio.Button value={'right'}>Right</Radio.Button>
            <Radio.Button value={'bottom'}>Bottom</Radio.Button>
            <Radio.Button value={'left'}>Left</Radio.Button>
          </Radio.Group>
        </Collapse.Panel>
      </Collapse>
    </>
  );
};