import React from "react"
import { components, DropdownIndicatorProps, MenuProps, OptionProps, Options } from 'react-select';

import { Input } from '../../Input';
import { Icons } from '../../Icons';
import { Button } from '../../Button';

export const CustomOptionHelper = (
    textField: string, 
    valueField: string, 
    options: any, 
    isMulti: boolean, 
    hasDropdownIcon: boolean,
    onSelectAll: () => void
) => {

    const CustomDropdownIndicator = (props: DropdownIndicatorProps<typeof options, typeof isMulti> ) => {
      const {
        selectProps: { menuIsOpen }
      } = props;
      return (
        <components.DropdownIndicator {...props}>
          {menuIsOpen ? <Icons size="small" name="arrow_drop_up"/> : <Icons size="small" name="arrow_drop_down"/>}
        </components.DropdownIndicator>
      );
    };

    const MenuWithButton = (props: MenuProps<typeof options, typeof isMulti> ) => {
      return (
        <components.Menu {...props}>
          <div style={{paddingLeft: "2%", width: "96%", display: "flex", flexDirection: "column", alignItems: "center"}}>
            <Button variant="secondary" onClick={onSelectAll} style={{width: "289px", height: "33px", backgroundColor: "#f1f1f1", margin: "6px 0px 3px 0px"}}>Select All</Button>
          </div>
          {props.children}
        </components.Menu>
      );
    };

    const MenuWithSearchBarButton = (props: MenuProps<typeof options, typeof isMulti> ) => {
      return (
        <components.Menu {...props}>
          <div style={{paddingLeft: "2%", width: "96%", display: "flex", flexDirection: "column", alignItems: "center"}}>
            <Input type="text" placeholder="Search Bar" icon="search"/>
            <Button variant="secondary" onClick={onSelectAll} style={{width: "289px", height: "33px", backgroundColor: "#f1f1f1", marginBottom: "3px"}}>Select All</Button>
          </div>
          {props.children}
        </components.Menu>
      );
    };

    const CustomOptionWithDetails = (props: OptionProps<typeof options, true> ) => {

      const {
        ...
        option
      } = props
  
      return (
        <components.Option {...props}>
          <div style={{paddingLeft: "2%", width: "96%", display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "space-between"}}>
            <div>{option.data[textField]} </div>
            <div style={{color: "#727272"}}>{option.data[valueField]}</div>
          </div>
        </components.Option>
      );
    };

    const optionComponents = {
      DropdownIndicator: hasDropdownIcon ? CustomDropdownIndicator : () => null, 
      IndicatorSeparator: () => null,
    }

    return optionComponents
}









