import React, { useState, useRef, useEffect, HtmlHTMLAttributes } from "react";

import "./Select.css";
import { getCN, clickDetective, randomId } from "../utils";

import { IconTopArrow } from "../../svg_icons/IconTopArrow";
import { IconBottomArrow } from "../../svg_icons/IconBottomArrow";

import ButtonTouch from "../ButtonTouch/ButtonTouch";

import FormField from "../../componentsDefault/FormField/FormField";

function Select({
  options,
  placeholder = "Выбрать",
  renderOption,
  value,
  onChange,
  autoClose = true,
  maxHeight = 200,
  ...props
}: {
  mode?:
    | `primary`
    | `positive`
    | `danger`
    | `warning`
    | `secondary`
    | `outline`;
  [x: string]: any;
}) {
  const [props_id, setPropsId] = useState(randomId(props.id, `select`));

  const [open, setOpen] = useState(false);

  const [is_mobile_hover, setMobileHover] = useState(false);
  const [is_hover, setHover] = useState(false);

  const onChangeCustom = (e: any, value: any) => {
    e.target.value = value;
    e.value = value;
    if (autoClose) setOpen(false);
    if (onChange) onChange(e);
  };

  const onMouseHover = (e: any) => {
    if (!is_mobile_hover) {
      if (e.type == "mouseover") {
        setHover(true);
        if (props.onMouseOver) props.onMouseOver();
      } else if (e.type == "mouseout") {
        setHover(false);
        if (props.onMouseOut) props.onMouseOut();
      }
    }
  };

  clickDetective(props_id, () => {
    setOpen(false);
  });

  const onTouchStart = (e: any) => {
    setMobileHover(true);
    if (props.onTouchStart) props.onTouchStart(e);
  };

  return (
    <FormField
      onTouchStart={onTouchStart}
      onMouseOver={onMouseHover}
      onMouseOut={onMouseHover}
      onClick={() => setOpen(!open)}
      top={props.top}
      bottom={props.bottom}
      id={props_id}
    >
      <div
        className={getCN([`Select`])}
      >
        <div
          className={getCN([
            `Select__in`,
            `Background__secondary`,
            renderOption && value && `Select__in--render-option`,
            open && `Select__in--open`,
            is_hover && `MYUI-FormField__hover`,
          ])}
        >
          <div className={getCN([`Select__children`])}>
            {!value
              ? placeholder
              : options.find((x: any) => x.value == value) && !renderOption
              ? options.find((x: any) => x.value == value).label
              : renderOption(options.find((x: any) => x.value == value))}
          </div>
          <div className={getCN([`Select__icon`])}>
            {!open ? (
              <IconBottomArrow width={14} height={14} />
            ) : (
              <IconTopArrow width={14} height={14} />
            )}
          </div>
        </div>

        {open && (
          <div style={{ maxHeight }} className={getCN([`Select__list`])}>
            {options.map((b: any, index: number) => (
              <ButtonTouch
                mode="background"
                stretched
                disabled={b.disabled}
                onClick={(e: any) => {
                  onChangeCustom(e, b.value);
                }}
              >
                {!renderOption ? b.label : renderOption(b)}
              </ButtonTouch>
            ))}
          </div>
        )}
      </div>
    </FormField>
  );
}

/*
<select className={getCN([`Select__in`])}>
        <option value="" hidden disabled selected>
          {label}
        </option>
        {options[0].group
          ? options.map((a: any, index: number) => (
              <optgroup label={a.label}>
                {a.group.map((b: any, index: number) => (
                  <option value={b.value}>{b.label}</option>
                ))}
              </optgroup>
            ))
          : options.map((b: any, index: number) => (
              <option value={b.value}>{b.label}</option>
            ))}
      </select>
*/
export default Select;