import { Label } from '@radix-ui/react-label';
import React from 'react';

import Select, { Props as SelectProps } from 'react-select';
import { useTranslations } from 'next-intl';

interface ReactSelectFormProps extends SelectProps {
  label?: string;
  customStyle?: any;
  defaultStyle?: any;
  placeholder?: any;
  onFocus?: any;
  value?: any;
  onChange?: (value: any) => void;
}

const ReactSelectForm: React.FC<ReactSelectFormProps> = ({
  label,
  customStyle,
  defaultStyle,
  placeholder,
  onFocus,
  value,
  options,
  onChange,
  ...otherProps
}) => {
  const t = useTranslations('Index');
  const id = Date.now().toString();
  const customStyles = {
    control: (provided: any) => ({
      ...provided,
      width: '210px',
      minHeight: '48px',
      backgroundColor: '#FCFCFB',
      border: '1px solid #F5F5FA',
      color: 'black',

      '@media screen and (max-width: 380px)': {
        width: '100%',
      },
    }),

    menu: (provided: any) => ({
      ...provided,
      zIndex: '999',
    }),

    indicatorContainers: (provided: any) => ({
      ...provided,
      padding: '2px',
    }),

    indicatorSeparator: (provided: any) => ({
      ...provided,
      display: 'none',
    }),

    group: (provided: any) => ({
      ...provided,
      width: '100px',
      height: '40px',
      backgroundColor: 'white',
      borderRadius: '6px',
      border: '1px solid #edf0f3',
      '&:focus': {
        borderColor: 'transparent',
      },
    }),
  };

  const defualutStyles = {
    control: (provided: any) => ({
      ...provided,
      width: '100%',
      minHeight: '48px',
      backgroundColor: '#F9F7F7',
      borderColor: '#e2e8f0',
    }),
    indicatorSeparator: (provided: any) => ({
      ...provided,
      display: 'none',
    }),
  };

  const handleValueChange = (selectedOption: any) => {
    if (onChange) {
      onChange(selectedOption); // Update the selected value
    }
  };

  return (
    <div className='flex flex-col gap-[10px]'>
      {label && (
        <Label htmlFor={label} className='text-[16px]'>
          {label}
        </Label>
      )}
      <Select
        id={id}
        placeholder={t(placeholder)}
        onFocus={onFocus}
        styles={
          (defaultStyle && defualutStyles) || (customStyle && customStyles)
        }
        value={value}
        options={options}
        onChange={handleValueChange}
        {...otherProps}
      />
    </div>
  );
};

export default ReactSelectForm;