import styled, { css } from 'styled-components';

import { ButtonProps } from '../../../components/shared/Button';
import { mediaMax, mediaMin } from '../../theme/mixins';

export interface ButtonStyleProps {
  className?: string;
  loading?: boolean;
  icon?: boolean;
  large?: boolean;
  small?: boolean;
  extraSmall?: boolean;
  display?: 'block' | 'inline-block';
  alignment?: 'left' | 'center';
  color?: TButtonColors;
  center?: boolean;
}

export type TButtonColors = 'white' | 'grey' | 'blue' | 'lightBlue' | 'yellow';

export const styleButton = css<ButtonStyleProps>`
  position: relative;
  text-transform: uppercase;
  border-radius: 40px;
  padding: 14px 20px;
  border: none;
  transition: all 150ms ease;
  display: ${props => props.display};
  text-align: ${props => props.alignment};
  width: 100%;
  font-size: 1rem;
  ${props => props.theme.default.fonts.ubuntuBold};
  max-width: ${props => (props.small ? '360px' : props.large ? '450px' : '100%')};

  ${props => props.center && css`
    margin: 0 auto;
  `}

  ${props => props.extraSmall && css`
    max-width: 250px;
    padding: 8px 16px;
    font-size: 0.9rem;
  `}

  ${mediaMax.small(css`
    max-width: 100%;
  `)}

  ${props => {
  switch (props.color) {
    default:
    case 'blue':
      return css`
        color: ${props.theme.default.colors.white}!important;
        background: ${props.theme.default.gradient.blue};

        &:focus,
        &:active,
        &:hover {
          &,
          &:before {
            background: linear-gradient(
              to right,
              ${props.theme.default.colors.blue},
              ${props.theme.default.colors.blue}
            );
          }
        }

        &:after {
          border-color: ${props.theme.default.colors.white};
        }

        &:disabled {
          background: ${props.theme.default.colors.grey};

          &:before {
            display: none;
          }
        }
      `;
    case 'grey':
      return css`
          color: ${props.theme.default.colors.darkGrey}!important;
          background-color: transparent;
          padding: 12px 20px;
          border: 2px solid ${props.theme.default.colors.grey};

          &:disabled {
            border-color: ${props.theme.default.colors.grey};
            background-color: ${props.theme.default.colors.lightGrey};
          }

          &:after {
            border-color: ${props.theme.default.colors.grey};
          }
        `;
    case 'white':
      return css`
          color: ${props.theme.default.colors.white}!important;
          background-color: transparent;
          padding: 12px 20px;
          border: 2px solid ${props.theme.default.colors.white};
          
          &:focus,
          &:active,
          &:hover {
            opacity: .8;
          }
        `;
    case 'lightBlue':
      return css`
          color: ${props.theme.default.colors.blue}!important;
          background-color: transparent;
          padding: 12px 20px;
          border: 2px solid ${props.theme.default.colors.blue};
          
          &:focus,
          &:active,
          &:hover {
            opacity: .8;
          }
        `;
    case 'yellow':
      return css`
        color: ${props.theme.default.colors.black}!important;
        background: ${props.theme.default.gradient.yellow};

        &:focus,
        &:active,
        &:hover {
          &,
          &:before {
            background: linear-gradient(
              to right,
              ${props.theme.default.colors.yellow},
              ${props.theme.default.colors.yellow}
            );
          }
        }

        &:after {
          border-color: ${props.theme.default.colors.black};
        }

        &:disabled {
          background: ${props.theme.default.colors.grey};

          &:before {
            display: none;
          }
        }
        `;
  }
}}

  ${props => props.icon && css`
    border-radius: 50%;
    width: 56px;
    height: 56px;

    &:after {
      left: 50%;
      transform: translate(-30%, -50%) rotate(-135deg);
    }
  `}
`;

// eslint-disable-next-line @typescript-eslint/no-unused-vars
export const Button = styled(({ display, color, alignment, icon, large, small, extraSmall, center, ...rest }) => <button {...rest} />)<ButtonProps>`
  ${styleButton};
  &:disabled {
    cursor: default;
  }

  ${props => props.loading && css`
    &:after {
      transform-origin: center;
      position: absolute;
      content: '';
      top: 50%;
      right: 20px;
      transition: 100ms ease all;
      border: 2px solid;
      border-radius: 50%;
      height: 20px;
      width: 20px;
      animation: spin 1s linear infinite;

      ${() => {
        switch (props.color) {
          default:
          case 'blue':
            return css`
                    border-color: ${props.theme.default.colors.white};
                  `;
          case 'grey':
            return css`
                    border-color: ${props.theme.default.colors.darkGrey};
                  `;
          case 'white':
            return css`
                    border-color: ${props.theme.default.colors.black};
                  `;
          case 'lightBlue':
            return css`
                    border-color: ${props.theme.default.colors.blue};
                  `;
          case 'yellow':
            return css`
                    border-color: ${props.theme.default.colors.black};
                  `;
        }
      }};

        border-left: 2px solid transparent;

        @keyframes spin {
          from {
            transform: translateY(-50%) rotate(0deg);
          }
          to {
            transform: translateY(-50%) rotate(360deg);
          }
        }
      }
    `}
`;

Button.defaultProps = {
  display: 'block',
  alignment: 'center',
  color: 'blue'
};

export const ButtonContainer = styled.div`
  text-align: center;
  
  > * {
    margin-top: 20px;
     
    ${mediaMin.small(css`
      margin: 10px;
    `)}
  }
`;