import React from "react";
import Select, { components } from 'react-select';
import './select.css';
import { ReactComponent as DropDown } from '../../../assets/images/icons/Dropdown.svg'

type OptionProps = {
    label: string,
    value: string | number
}

type Porps = {
    label?: string,
    id:string,
    name: string,
    placeholder?: string,
    isClearable?: boolean,
    isDisabled?: boolean,
    isSearchable?: boolean,
    isMulti?: boolean,
    helperText?: string,
    error?: boolean,
    errorMessage?: string,
    size?: 'default' | 'small' | 'medium' | 'large',
    borderRadious?: 'small' | 'medium' | 'large',
    variant?: 'default' |'primary' | 'secondary',
    handleChange: (event:any) => void;
}

const slectOptin:OptionProps[] = [
    { value: 'AF', label: 'Afghanistan' },
    { value: 'AO', label: 'Angola' },
    { value: 'AR', label: 'Argentina' },
    { value: 'BD', label: 'Bangladesh' },
    { value: 'BE', label: 'Belgium' },
    { value: 'BM', label: 'Bermuda' }
];

const DropdownIndicator = (props: any) => {
    return (
      <components.DropdownIndicator {...props}>
        <DropDown/>
      </components.DropdownIndicator>
    );
};

const Option = (props:any) => {
    return (
      <div>
        <components.Option {...props}>
          <input
            type="checkbox"
            checked={props.isSelected}
            onChange={() => null}
          />{" "}
          <label>{props.label}</label>
        </components.Option>
      </div>
    );
  };

const MultiValue = (props:any) => (
    <components.MultiValue {...props}>
      <span>{props.data.label}</span>
    </components.MultiValue>
  );


const SelectBox = (props:Porps) => {

    const {label, id, placeholder, isClearable, isDisabled, name, isSearchable,variant,borderRadious,  isMulti,helperText,error,errorMessage, size, handleChange} = props;

    return (
        <div className={`form-group ${error ? 'error' : ''} form-${size} ${variant ? `background-${variant}` : ''} ${borderRadious ? `rounded-${borderRadious}` : ''}`}>
            <label className='control-label'>{label}</label>
            {
                isMulti ? <Select
                id={id}
                name={name}
                options={slectOptin}
                className="react-select-container"
                classNamePrefix="react-select"
                placeholder={placeholder}
                isClearable={isClearable}
                isDisabled={isDisabled}
                isSearchable={isSearchable}
                isMulti={isMulti}
                onChange={handleChange}
                components={{ DropdownIndicator, Option, MultiValue}}
                closeMenuOnSelect={false}
                hideSelectedOptions={false}
            />
            :
            <Select
                id={id}
                name={name}
                options={slectOptin}
                className="react-select-container"
                classNamePrefix="react-select"
                placeholder={placeholder}
                isClearable={isClearable}
                isDisabled={isDisabled}
                isSearchable={isSearchable}
                onChange={handleChange}
                components={{ DropdownIndicator}}
                closeMenuOnSelect={true}
                hideSelectedOptions={false}
            />
            }

            {(error && errorMessage) && <p className='error-text'>{errorMessage}</p>}
            {(!error && helperText) && <p className='helper-text'>{helperText}</p>}
        </div>
    );
};

export default SelectBox;