import React from 'react';
import styled from 'styled-components';
import { options } from '../../components/fakeData';
import SwitchSelector from 'react-switch-selector';
import { notification } from 'antd';

interface CustomSwitchSelectorProps {
  onSwitchChange: (newValue: string) => void;
}

const CustomSwitchSelector: React.FC<CustomSwitchSelectorProps> = ({
  onSwitchChange,
}) => {
  const initialSelectedIndex = options.findIndex(
    ({ value }) => value === 'task'
  );

  const handleSwitchChange = (selectedOptionValue: unknown) => {
    if (typeof selectedOptionValue === 'string') {
      onSwitchChange(selectedOptionValue);
    } else {
      // console.error(
      //   'Unexpected type for selectedOptionValue:',
      //   typeof selectedOptionValue
      // );

      notification.error({
        message: 'Error',
        description:
          `${typeof selectedOptionValue}` ||
          'Unexpected type for selectedOptionValue.',
      });
    }
  };

  return (
    <StyledSwitch>
      <SwitchSelector
        onChange={handleSwitchChange}
        options={options}
        initialSelectedIndex={initialSelectedIndex}
        backgroundColor={'#cbc8c2'}
        fontColor={'#f5f6fa'}
        optionBorderRadius={30}
      />
    </StyledSwitch>
  );
};

const StyledSwitch = styled.div`
  width: 35%;
  height: 40px;
  .react-switch-selector-wrapper {
    background: #777777;
  }
`;

export default CustomSwitchSelector;
