import React from 'react';
import styled from 'styled-components';

interface Props {
  /**
   * callback function when the button is clicked
   */
  callback: (p: string) => void;
  /**
   * the text of the button or selected item
   */
  title?: string;
  /**
   * the text of the error
   */
  error?: string;
  /**
   * font size in pixels
   */
  fontSize?: number;
  /**
   * if  the button should be inline-block or block
   */
  fullWidth?: boolean;
  /**
   * if  the required should added or not
   */
  required?: boolean;
  /**
   * if  the optional text should be shown or not
   */
  optional?: boolean;
  /**
   * padding applied to all 4 sides, in pixels, as a string (valid css)
   */
  padding?: string;
  /**
   * the rounding amount of the button
   */
  radius?: 'rounded' | 'square' | 'pill';
  /**
   * the rounding amount of the button
   */
  defaultValue?: string;
  /**
   * the list options of the button
   */
  options?: Array<Options>;
  /**
   * If using our variables, any valid color variable, or default, dark, none
   */
  //   theme?: string;
  /**
   * extra classes to be applys
   */
  themeClass?: string;
  id?: string;
  name?: string;
}

interface Options {
  title: string;
  value: string;
  disabled?: boolean;
}

interface SelectProps {
  fullWidth: boolean;
  radius: 'rounded' | 'pill' | 'square';
  padding: string;
  fontSize?: number;
  defaultValue?: string;
}

const Select = ({
  callback,
  fullWidth = false,
  padding = '10px 45px',
  radius = 'rounded',
  options = [
    { title: 'Select here', value: '0' },
    { title: 'some heres', value: '1' },
  ],
  fontSize = 21,
  error,
  title = 'State',
  required = true,
  optional = false,
  themeClass,
  defaultValue,
  id,
  name,
}: Props) => (
  <label
    className={`nwc--select ${themeClass}`}
    // htmlFor={id}
  >
    <div className="nwc--label-wrap">
      <strong className="font--14">
        <span data-test="component-select-title">{title}</span>
        {required === true && (
          <Asterisk data-test="component-select-required" className="font--10">
            {' *'}
          </Asterisk>
        )}
        {optional === true && (
          <sup data-test="component-select-optional" className="font--grey font--10">
            {' (optional)'}
          </sup>
        )}
      </strong>
    </div>
    <SelectWrapper
      value={defaultValue}
      fullWidth={fullWidth}
      onChange={(e) => callback(e.target.value)}
      radius={radius}
      padding={padding}
      required={required}
      fontSize={fontSize}
      id={id ? id : ''}
      name={name ? name : ''}
    >
      {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} disabled={!!option.disabled}>
            {option.title}
          </option>
        ),
      )}
    </SelectWrapper>
    {error && error !== null && error !== '' && (
      <aside data-test="component-select-error" className="nwc--validation nwc--validation--error font--12">
        {error}
      </aside>
    )}
  </label>
);

const radiusSwitch = (type: string): string => {
  switch (type) {
    case 'square':
      return '0px';
    case 'rounded':
      return '4px';
    case 'pill':
      return '300px';
    default:
      return '0px';
  }
};

const SelectWrapper = styled.select<SelectProps>`
  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'inherit')};
  border-radius: ${({ radius }) => radiusSwitch(radius)};
  padding: ${({ padding }) => padding};
  font-size: ${({ fontSize }) => `${fontSize}px`};
`;

const Asterisk = styled.sup`
  color: #db3939 !important;
`;

export default Select;