import styled from "styled-components";
import { RooButtonProps } from ".";
import {
  purpleBase,
  purpleDark600,
  whiteBackground,
  blueLighter,
  grayBase,
  purpleDark700,
  purpleLighter,
} from "../constants";

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

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

export const Button = styled.button<RooButtonProps>`
  box-shadow: 0px 2px 4px #d6d6d6;
  border-radius: 24px;
  gap: 8px;
  font-family: "Jost";
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 29px;
  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}`};
  color: ${(props) =>
    `${props.buttonType === "primary" ? whiteBackground : purpleBase}`};
  border: ${(props) =>
    `${props.buttonType === "primary" ? 0 : `2px solid ${purpleBase}`}`};
  &:hover {
    background: ${(props) =>
      `${props.buttonType === "primary" ? purpleDark600 : ""}`};
    border: ${(props) =>
      `${props.buttonType === "primary" ? 0 : `2px solid ${blueLighter}`}`};
    color: ${(props) => `${props.buttonType === "primary" ? "" : grayBase}`};
  }
  &:active {
    background: ${(props) =>
      `${props.buttonType === "primary" ? purpleDark700 : ""}`};
    outline: ${(props) => `${props.buttonType === "primary" ? "none" : ""}`};
    border: ${(props) =>
      `${props.buttonType === "primary" ? 0 : `2px solid ${purpleDark700}`}`};
    color: ${(props) =>
      `${props.buttonType === "primary" ? purpleDark700 : ""}`};
  }
  &:focus {
    background: ${(props) =>
      `${props.buttonType === "primary" ? purpleBase : ""}`};
    border: ${`2px solid ${purpleBase}`};
    box-shadow: 0px 2px 4px rgba(65, 40, 148, 0.2);
    outline: none;
  }
  &:disabled {
    background: ${(props) =>
      `${props.buttonType === "primary" ? purpleLighter : ""}`};
    border: ${`2px solid ${purpleLighter}`};
    cursor: not-allowed;
    mix-blend-mode: normal;
  }
  @media (max-width: 768px) {
    width: 100%;
  }
`;
