import styled from "styled-components";
import { ButtonProps } from ".";
import {
  blueBase,
  purpleBase,
  purpleDark600,
  purpleDark700,
  purpleLighter,
  whiteBackground,
  Button as ButtonText,
} from "../constants";

const getButtonPadding = (size: string | undefined) => {
  let padding;
  if (size === "small") padding = "2px 32px";
  else padding = "8px 32px";
  return padding;
};

const getButtonHeight = (size: string | undefined) => {
  let height;
  if (size === "small") height = "29px";
  else height = "39px;";
  return height;
};

const getButtonText = (size: string | undefined) => {
  return ButtonText;
};

export const Button = styled.button<ButtonProps>`
  box-shadow: 0px 2px 4px rgba(65, 40, 148, 0.2);
  border-radius: 24px;
  gap: 8px;
  ${(props) => `${getButtonText(props.size)}`};
  line-height: 24px;
  text-transform: capitalize;
  z-index: 1;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: ${(props) => `${getButtonHeight(props.size)}`};
  padding: ${(props) => `${getButtonPadding(props.size)}`};

  background: ${(props) => `${props.buttonType === "primary" ? purpleBase : whiteBackground}`};
  border-color: ${purpleBase};
  border-style: solid;
  border-width: ${(props) => `${props.buttonType === "primary" ? '0px' : '2px'}`};
  color: ${(props) => `${props.buttonType === "primary" ? whiteBackground : purpleBase}`};

  &:hover {
    background: ${(props) => `${props.buttonType === "primary" ? purpleDark600 : ""}`};
    border-color: ${purpleDark600};
    box-shadow: none;
    color: ${(props) => `${props.buttonType === "primary" ? "" : purpleDark600}`};
  }
  &:active {
    background: ${(props) => `${props.buttonType === "primary" ? purpleDark700 : ""}`};
    border-color: ${purpleDark700};
    box-shadow: none;
    color: ${(props) => `${props.buttonType === "primary" ? "" : purpleDark700}`};
  }
  &:focus {
    outline: none;
  }
  &:focus-visible {
    background: ${(props) => `${props.buttonType === "primary" ? purpleBase : ""}`};
    border-color: ${blueBase};
    border-width: 4px;
    color: ${(props) => `${props.buttonType === "primary" ? "" : purpleBase}`};
    outline: none;
  }
  &:disabled {
    background: ${(props) => `${props.buttonType === "primary" ? purpleLighter : ""}`};
    border-color: ${purpleLighter};
    box-shadow: none;
    color: ${(props) => `${props.buttonType === "primary" ? "" : purpleLighter}`};
    cursor: not-allowed;
    mix-blend-mode: normal;
  }
  @media (max-width: 768px) {
    width: 100%;
  }
`;
