import { colors, responsiveMedia, spaces, typography } from '@/styles/variables'
import styled, { css } from 'styled-components'

import { IButtonSC } from './Button.interface'
import { fontSize } from '@/styles/utilities'

export const StyledButton = styled.a<IButtonSC>`
  font-family: inherit;
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  border: 0;
  outline: 0;
  text-transform: uppercase;
  border-radius: 0px;

  margin-right: ${spaces[3]};

  transition: all 0.3s ease;
  cursor: pointer;

  &:only-child,
  &:only-of-type,
  &:last-of-type,
  &.w-100 {
    margin-right: 0;
  }

  & > span,
  & > i {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;

    z-index: 2;
  }

  & > i {
    color: currentColor;
    transition: all 0.3s ease;
  }

  & * ~ span,
  & span ~ * {
    margin-left: ${spaces[2]};
  }

  &:before {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0;

    transform: scaleX(0);
    transform-origin: 0 50%;

    transition: all 0.3s ease;

    z-index: 1;
  }

  ${props => {
    switch (props.$size) {
      case 'normal':
      default:
        return css`
          ${fontSize('texts')};
          padding: 16px 20px;
        `
      case 'small':
        return css`
          ${fontSize('captions')};
          padding: 12px;
        `
      case 'large':
        return css`
          ${fontSize('h6')};
          padding: 18px 26px;
        `
    }
  }}

  ${props => {
    switch (props.$variant) {
      case 'primary':
      default:
        switch (props.$theme) {
          case 'light':
          default:
            return css`
              background-color: ${colors.white};
              color: ${colors.primary70};

              &:before {
                top: 0;
                background: ${colors.gray20};
              }

              ${props.outlined &&
              `
                color: ${colors.white};
                background-color: transparent;
                box-shadow: 0 0 0 1px ${colors.white} inset;

                &:before{
                  background: ${colors.white};
                }
              `}

              &:hover {
                color: ${colors.primary70};

                &:before {
                  transform: scaleX(1);
                }
              }
            `

          case 'dark':
            return css`
              background-color: ${colors.primary70};
              color: ${colors.white};

              &:before {
                top: 0;
                background: ${colors.gray70};
              }

              ${props.outlined &&
              `
                color: ${colors.primary70};
                background-color: transparent;
                box-shadow: 0 0 0 1px ${colors.primary70} inset;

                &:before{
                  background: ${colors.gray70};
                }
              `}

              &:hover {
                color: ${colors.white};
                &:before {
                  transform: scaleX(1);
                }
              }
            `
        }

      case 'secondary':
        switch (props.$theme) {
          case 'light':
          default:
            return css`
              color: ${colors.white};
              background: transparent;
              border-bottom: 1px solid ${colors.white};
              justify-content: space-between;

              &:before {
                top: 0;
                height: 100%;
                transform: scaleY(0);
                transform-origin: center bottom;
                background: ${colors.white};
              }

              &:hover {
                color: ${colors.primary70};

                &:before {
                  transform: scaleY(1);
                }
              }
            `
          case 'dark':
            return css`
              color: ${colors.primary70};
              background: transparent;
              border-bottom: 1px solid ${colors.primary70};
              justify-content: space-between;

              &:before {
                top: 0;
                height: 100%;
                transform: scaleY(0);
                transform-origin: center bottom;
                background: ${colors.primary70};
              }

              &:hover {
                color: ${colors.white};
                &:before {
                  transform: scaleY(1);
                }
              }
            `
        }

      case 'link':
        return css`
          color: currentColor;
          background-color: transparent;
          // padding: 0;
          min-width: unset !important;

          &:before {
            height: 1px;
            background-color: currentColor;
          }

          &:hover {
            &:before {
              transform: scaleX(1);
            }
          }
        `
    }
  }}

  ${({ removeLabel }) =>
    removeLabel &&
    `
    @media only screen and (max-width: ${responsiveMedia}) {
      & span {
        display: none
      }

      & *~span,
      & span~* {
        margin-left: 0
      }
    }
  `}

  ${({ disabled }) =>
    disabled &&
    `
    background-color: ${colors.gray50} !important;
    color: ${colors.white} !important;

    pointer-events: none;
    user-select: none;
  `}
`