import React, { FC, useContext, useState } from 'react';
import { CustomOptionHelper } from './Helpers/CustomOptionHelper';

import SelectRS from 'react-select';
import { SelectProps, customStyles } from './Select.types';
import { Pill } from '../Pill';
import { useLocale } from '../../hooks/useLocale';
import "./styles.scss"
import { Label } from '..';
import { FormContext } from "../Form";

export const Select: FC<SelectProps> = ({
  name = "tempID",
  options = Array({}),
  textField = "label",
  valueField = "value",
  placeholder = "Select",
  defaultValue = {},
  isMulti = false,
  isClearable = false, 
  isSearchable = false, 
  isDisabled = false,
  isLoading = false, 
  isRtl = false,
  showSelection = true,
  showPillsOutside = true,
  value = [],
  hasDropdownIcon = true,
  customOption,
  customMenu,
  style = {},
  className,
  label,
  pillSize = "full",
  hideSelectedOptions = false,
  onChange,
  onSelectAll = () => {},
  noOptionsMessage,
  isRequiere,
}) => {
  const formContext: any = useContext(FormContext as any);

  const lang = {
    label: useLocale(label),
    placeholder: useLocale(placeholder)
  }

  const deleteOption = (item: any) => {
    const newValues = value.filter((cval: any) => cval[valueField] !== item[valueField]);
    if (onChange) {
      onChange(newValues)
    }
  }

  let optionComponents = CustomOptionHelper(textField, valueField, options, isMulti, hasDropdownIcon, onSelectAll)
  if (customOption) {
    optionComponents = {
      ...optionComponents,
      ...{Option: customOption}
    }
  }
  if (customMenu) {
    optionComponents = {
      ...optionComponents,
      ...{Menu: customMenu}
    }
  }

  if (noOptionsMessage) {
    optionComponents = {
      ...optionComponents,
      ...{NoOptionsMessage: noOptionsMessage}
    }
  }

  return (
    <div className="select-gtc-rc-wrap" style={style} data-testid="gtc-rc-select">
        {label &&
          <div className="input-gtc-rc-label">
            <Label>{lang['label']}</Label>
          </div>
        }
        <SelectRS
          className={[
            className,
            (isRequiere && formContext?.submitAttempted && (!value || (Array.isArray(value) && value.length === 0))) ? 'is-required' : ''
          ].filter(Boolean).join(' ')}
          classNamePrefix="react-select"
          placeholder={lang['placeholder']}
          //defaultValue={defaultValue}
          isDisabled={isDisabled}
          isLoading={isLoading}
          isClearable={isClearable}
          isRtl={isRtl}
          isSearchable={isSearchable}
          name={name}
          options={options}
          isMulti={isMulti}
          controlShouldRenderValue={!isMulti || !showPillsOutside && showSelection}
          onChange={(e) => onChange(e)}
          value={value}
          styles={customStyles}
          //formatOptionLabel={formatOptionLabel}
          getOptionLabel={options => options[textField]}
          getOptionValue={options => options[valueField]}
          components={optionComponents}
          closeMenuOnSelect={isMulti ? false : true}
          hideSelectedOptions={hideSelectedOptions}
          //menuIsOpen
        />

      {(showSelection && isMulti && showPillsOutside) &&
        <div style={{marginTop: "5px"}}>
          {value?.map((v: any, index: number) => {
            return (
              <Pill
                key={"" + index}
                item={{ ...v, id: v[valueField], label: v[textField], color: "default-green" }}
                icon='cancel'
                clickable={false}
                onClickIcon={deleteOption}
                disabled={isDisabled}
                size={pillSize}
              />
            )
          })}
        </div>
      }
    </div>
  );
};