import React, { ReactNode, useRef } from 'react';
import InputError from './InputError';

export interface SelectOptionType {
  title: ReactNode | string;
  value: string;
  disabled?: boolean;
  selected?: boolean;
}
export interface SelectProps {
  /**
   * callback function when the button is clicked
   */
  callback: (e: object, id: string) => void;
  /**
   * the text of the button or selected item
   */
  title?: ReactNode;
  /**
   * the text of the error
   */
  error?: string;
  /**
   * if  the required should added or not
   */
  required?: boolean;
  /**
   * if  the optional text should be shown or not
   */
  optional?: boolean;
  /**
   * the rounding amount of the button
   */
  defaultValue?: string;
  /**
   * the list options of the button
   */
  options?: SelectOptionType[];
  id?: string;
  name?: string;
  theme?: string;
  /**
   * Classes to be added to the `<div>` wrapping the label and select.
   */
  labelTheme?: string;
  /**
   * Classes to be added to the `<label>`.
   */
  selectTheme?: string;
  /**
   * Classes to be added to the `<select>` element.
   */
}

const Select = ({
  callback,
  options = [
    { title: 'Select here', value: '0' },
    { title: 'some heres', value: '1' },
  ],
  title = 'Title',
  error,
  required = true,
  optional = false,
  defaultValue,
  id = 'mySelectId',
  name,
  theme,
  labelTheme,
  selectTheme,
}: SelectProps) => {
  const selectRef = useRef<HTMLSelectElement>(null);
  const wrapperRef = useRef<HTMLDivElement>(null);

  const handleChange = () => {
    if (selectRef.current && wrapperRef.current) {
      if (selectRef.current.validity.valid) {
        wrapperRef.current.classList.remove('border-_-states-error');
        wrapperRef.current.classList.remove('border-_-neutrals-400');
        wrapperRef.current.classList.add('border-_-misc-selectedDark');
      }
    }
  };

  return (
    <section data-c="slmr--Select" className="mb-8 relative">
      <div className="w-full">
        <div
          ref={wrapperRef}
          className={`relative transition-all border border-black rounded-md hover:border-_-misc-selectedMedium focus-within:border-_-misc-selectedDark group ${
            error && error !== '' ? 'border-_-states-error' : ''
          } ${theme}`}
        >
          <label
            className={`absolute leading-tight -top-2.5 left-4 justify-center ${
              title !== '' ? 'bg-white px-1' : ''
            } ${labelTheme}`}
            htmlFor={id}
          >
            <span className="transition-all inline-block h-1 group-hover:font-bold group-hover-within:text-sm text-xs">
              {title}
            </span>
            <span>
              {required === true && (
                <span
                  data-c="slmr--LabelOptional"
                  className={`text-_-states-error font-bold text-[smaller] ml-0.5`}
                >
                  {'*'}
                </span>
              )}
              {optional === true && (
                <span className="text-[10px] text-_-neutrals-400 float-right relative top-[4px] ml-1">
                  {'(optional)'}
                </span>
              )}
            </span>
          </label>
          <div
            className={`flex justify-between items-center bg-transparent h-11 px-2 text-_-neutrals-600 group-focus:drop-shadow-lg group-focus-within:text-black w-full ${selectTheme}`}
          >
            <select
              ref={selectRef}
              value={defaultValue}
              onChange={(e) => {
                handleChange();
                callback(e, id);
              }}
              required={required}
              id={id || ''}
              name={name || ''}
              className="h-full w-full bg-transparent appearance-none active:border-none focus:outline-none slmr--select"
              style={{
                WebkitAppearance: 'none',
                MozAppearance: 'none',
                appearance: 'none',
                paddingLeft: '8px',
              }}
            >
              {options.map((option) =>
                defaultValue === option.value ? (
                  <option
                    key={option.value}
                    value={option.value}
                    disabled={!!option.disabled}
                  >
                    {defaultValue || option.title}
                  </option>
                ) : (
                  <option
                    key={option.value}
                    value={option.value}
                    selected={option.selected}
                    disabled={!!option.disabled}
                  >
                    {option.title}
                  </option>
                )
              )}
            </select>
            <i className="fa-solid fa-light fa-chevron-down text-black group-hover:text-_-misc-selectedMedium group-focus-within:text-_-misc-selectedDark" />
          </div>
        </div>
        <div className="w-full absolute px-2">
          <InputError error={error} />
        </div>
      </div>
    </section>
  );
};

export default Select;