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

import v from '../../styles/Variables';

// theme for default styles, addon like cart {jsx}, shadow?

interface Props {
  /**
   * valid hex/rgba color for the background
   */
  background?: string;
  /**
   * callback function when the button is blurred
   */
  blurCb?: () => void;
  /**
   * callback function when the button is clicked
   */
  callback: () => void;
  /**
   * font color to be used, can be hex, rgba, or a variable
   */
  color?: string;
  /**
   * Aria controls attribute
   */
  controls?: string;
  /**
   * Aria expanded attribute
   */
  ariaexpanded?: boolean;
  /**
   * callback function when the button is focused
   */
  focusCb?: () => void;
  /**
   * font size in pixels
   */
  fontSize?: number;
  /**
   * if  the button should be inline-block or block
   */
  fullWidth?: boolean;
  /**
   * padding applied to all 4 sides, in pixels, as a string (valid css)
   */
  padding?: string;
  /**
   * the rounding amount of the button
   */
  radius?: 'square' | 'rounded' | 'pill';
  /**
   * If using our variables, any valid color variable, or default, dark, none
   */
  theme?: string;
  /**
   * extra classes to be applied
   */
  themeClass?: string;
  /**
   * the text of the button
   */
  title: string;
  /**
   * what sort of button this should be
   */
  type?: 'button' | 'submit' | 'reset';
}

interface Style {
  background: string;
  color: string;
  controls?: string;
  ariaexpanded?: boolean;
  fontSize: number;
  fullWidth: boolean;
  padding: string;
  radius: 'square' | 'rounded' | 'pill';
  theme: string;
  type: 'button' | 'submit' | 'reset';
}

const Button = ({
  background = v.colors.light,
  blurCb = () => null,
  callback,
  color = v.colors.dark,
  controls,
  ariaexpanded,
  focusCb = () => null,
  fontSize = 14,
  fullWidth = false,
  padding = '10px 50px',
  radius = 'square',
  theme = 'default',
  themeClass,
  title,
  type = 'button',
}: Props) => {
  return (
    <Btn
      aria-controls={controls}
      aria-expanded={ariaexpanded}
      onClick={() => callback()}
      onFocus={() => focusCb()}
      onBlur={() => blurCb()}
      className={`nwc--button ${themeClass}`}
      background={background}
      color={color}
      fontSize={fontSize}
      fullWidth={fullWidth}
      padding={padding}
      radius={radius}
      theme={theme}
      type={type}
    >
      {title}
    </Btn>
  );
};

export default Button;

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

const handleTheme = (theme: string) => {
  // if it's just the none theme, send it right back
  if (theme === 'none') return 'color: #000; border-color: #000; background-color: #fff';

  // @ts-ignore
  const colorTheme: string = v.colors[theme];
  // dynamically look for a color in our variables to style it
  if (theme && colorTheme !== undefined) {
    // check if it's light or dark
    if (['border', 'light', 'offLight', 'placeholder'].indexOf(theme) >= 0) {
      return `color: #000; background: ${colorTheme}; border-color: ${colorTheme}}`;
    } else {
      return `color: #fff; background: ${colorTheme}; border-color: ${colorTheme}}`;
    }
  } else {
    // if not found or not matching, just silently fail
    return null;
  }
};

/* styles */
const Btn = styled.button<Style>`
  background: ${({ background }) => background};
  border: 1px solid ${v.colors.border};
  border-radius: ${({ radius }) => radiusSwitch(radius)};
  color: ${({ color }) => color};
  display: ${({ fullWidth }) => (fullWidth ? 'block' : 'inline-block')};
  font-size: ${({ fontSize }) => `${fontSize}px`};
  padding: ${({ padding }) => padding};
  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'inherit')};
  ${({ theme }) => handleTheme(theme)};
`;