import styled from "@emotion/styled";
import * as React from "react";
import { MdArrowDropDown } from "react-icons/md";
import { ClipLoader } from "react-spinners";
import {
  DARK_PRIMARY_TWO,
  DARK_SECONDARY_THREE,
  LIGHT_PRIMARY_THREE,
  LIGHT_SECONDARY_ONE,
  Theme,
} from "../../../shared/colors";

export type SelectValue = {
  value: string;
  title: string;
};

type Props = {
  value: string;
  onSelectChange: (value: string) => any;
  values: SelectValue[];
  colorTheme?: Theme;
  loading?: boolean;
};

type State = {};

class Select extends React.Component<Props, State> {
  currentSelect = React.createRef<HTMLSelectElement>();

  onSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    this.props.onSelectChange(event.target.value);
  };

  onSelectClick = () => {
    if (this.currentSelect.current) {
      this.currentSelect.current.click();
    }
  };

  render() {
    if (this.props.loading) {
      return (
        <SelectContainer colorTheme={this.props.colorTheme}>
          <SpinnerContainer>
            <ClipLoader
              color={
                this.props.colorTheme === Theme.DARK
                  ? DARK_SECONDARY_THREE
                  : LIGHT_SECONDARY_ONE
              }
              size={10}
            />
          </SpinnerContainer>
        </SelectContainer>
      );
    }
    return (
      <SelectContainer
        onClick={this.onSelectClick}
        colorTheme={this.props.colorTheme}
      >
        <SelectBar
          ref={this.currentSelect}
          value={this.props.value}
          onChange={this.onSelectChange}
          colorTheme={this.props.colorTheme}
        >
          {this.props.values.map((value) => {
            return (
              <option key={value.title} value={value.value}>
                {value.title}
              </option>
            );
          })}
        </SelectBar>
        <MdArrowDropDown
          style={{
            cursor: "pointer",
            marginLeft: "auto",
            display: "flex",
            alignSelf: "center",
            marginRight: "8px",
            color:
              this.props.colorTheme === Theme.DARK
                ? DARK_SECONDARY_THREE
                : LIGHT_SECONDARY_ONE,
          }}
        />
      </SelectContainer>
    );
  }
}

export default Select;

const SpinnerContainer = styled.div`
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 25px;
`;

const SelectBar = styled.select<{ colorTheme: Theme | undefined }>`
  display: flex;
  width: 100%;
  font-size: 14px;
  appearance: none;
  cursor: pointer;
  background-color: ${(props) =>
    props.colorTheme === Theme.DARK ? DARK_PRIMARY_TWO : LIGHT_PRIMARY_THREE};
  color: ${(props) =>
    props.colorTheme === Theme.DARK
      ? DARK_SECONDARY_THREE
      : LIGHT_SECONDARY_ONE};
  border-radius: 8px;
  border-width: 0px;
  padding: 4px 8px;
  :focus {
    outline: none;
  }
`;

const SelectContainer = styled.div<{ colorTheme: Theme | undefined }>`
  box-shadow: rgba(0, 0, 0, 0.03) 0px 0px 0px 1px,
    rgba(0, 0, 0, 0.05) 0px 1px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px;
  display: flex;
  border-radius: 8px;
  background-color: ${(props) =>
    props.colorTheme === Theme.DARK ? DARK_PRIMARY_TWO : LIGHT_PRIMARY_THREE};
`;