import { keyframes } from '@emotion/react';
import styled from '@emotion/styled';
import { ErrorMessage, Field, Form } from 'formik';

import {
  dark,
  darkLine,
  gray100,
  gray400,
  gray600,
  gray700,
  gray800,
  lightLine,
  lightPastelBlue,
  lightSmoke,
  red500,
  smoke,
  white,
} from '../../styles/colors';
import { BaseButton, BracketButton } from '../Buttons';

export const Separator = styled.div`
  margin: 5px 10px;
  border-bottom: 1px solid ${gray400};
`;

export const ButtonLink = styled.a`
  text-decoration: none;
`;

export const FormLink = styled.a`
  color: ${gray400};
  cursor: pointer;
  font-size: 12px;
  text-decoration: underline;
  transition: all 0.2s ease-in-out;
  &:hover {
    color: ${gray100};
    text-decoration: none;
  }
`;

export const ModalBodyParagraph = styled.p`
  font-family: Montreal;
  font-size: 14px;
  color: ${gray400};
  margin: 0 0 10px 0;
  max-width: 300px;
`;

export const ModalBodyTerms = styled.div`
  font-family: Montreal;
  font-size: 10px;
  color: ${gray700};
  margin: 0 0 10px 0;
  max-width: 300px;
  a {
    color: ${gray700};
  }
`;

export const AuthButton = styled(BaseButton)<{ cancel?: boolean }>`
  font-family: Architekt;
  border-color: ${lightSmoke};
  color: ${gray400};
  border-radius: 3px;
  width: 100%;
  min-width: 300px;
  border-width: 1px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  height: 44px;
  svg {
    width: 2.4rem;
    height: 2.4rem;
    margin-left: 20px;
  }
  &:not(:disabled):hover {
    border-color: ${gray700};
    color: ${gray400};
  }
  &:not(:disabled):active {
    border-color: ${gray700};
    color: ${gray400};
  }
  &:disabled:active {
    border-color: ${lightSmoke};
    color: ${gray400};
  }
  &:not(:disabled):focus {
    border-color: ${gray700};
  }
`;

export const InteractButton = styled(BaseButton)<{ cancel?: boolean }>`
  font-family: Architekt;
  color: ${smoke};
  border-width: 1px;
  border-color: transparent;
  font-weight: 500;
  display: flex;
  justify-content: center;
  height: 40px;
  border-radius: 0;
  padding: 16px 28px;
  flex-grow: 1;
  svg {
    width: 2.4rem;
    height: 2.4rem;
    margin-left: 20px;
  }
  ${({ cancel }) =>
    cancel
      ? `
    background-color: ${lightLine};
    &:not(:disabled):hover, &:not(:disabled):active, &:not(:disabled):focus {
      border-color: ${gray700};
      color: ${smoke};
    }
    `
      : `
    background-color: ${lightPastelBlue};
    &:not(:disabled):hover, &:not(:disabled):active, &:not(:disabled):focus {
      border-color: ${gray700};
      color: ${smoke};
    }
    `}

  margin-top: 20px;
  & + button {
    margin-top: 10px;
  }
`;

export const Notice = styled.div`
  font-family: Montreal;
  display: inline-block;
  color: ${dark};
  font-size: 14px;
  text-align: center;
  max-width: 300px;
  width: 100%;
  background-color: ${white};
  padding: 0.8rem;
  margin: 15px 0;
  border: 1px solid ${lightSmoke};
  outline: 2px solid transparent;

  @keyframes flash {
    0% {
      outline: 2px solid transparent;
    }
    50% {
      outline: 2px solid ${lightSmoke};
    }
    100% {
      outline: 2px solid transparent;
    }
  }
  &.flash {
    animation: flash 400ms ease-in-out;
    animation-iteration-count: 3;
  }
`;

export const CancelButton = styled(BracketButton)`
  font-family: Architekt;
  &:not(:disabled):hover {
    color: ${gray100};
    font-weight: 600;
  }
`;

export const AuthSeparator = styled.div`
  margin: 5px auto 15px auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: ${gray600};
`;

export const AuthSeparatorLine = styled.hr`
  width: calc(100% - 20px);
  height: 2px;
  background-color: ${gray600};
  margin: 20px 10px;
`;

export const Header = styled.h2`
  font-family: Montreal;
  text-transform: lowercase;
  width: 100%;
  letter-spacing: -2px;
  font-size: 2.5em;
  margin-bottom: 10px;
`;

export const fadeIn = keyframes`
  0% { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
`;

export const ModalContent = styled.div`
  animation: ${fadeIn} 0.5s;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
`;

export const FormWrapper = styled(Form)`
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0.4rem 0;
`;

export const FieldWrapper = styled.div`
  display: flex;
  flex-direction: column;
  margin-bottom: 0.9rem;

  div.labelWrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 7px;
  }
`;
export const FormLabel = styled.label`
  cursor: pointer;
  color: ${gray400};
  font-size: 11px;
  font-family: Montreal, 'Helvetica Neue', Helvetica, sans-serif;

  &:hover {
    color: ${gray100};
  }

  a {
    color: ${gray400};
    font-size: 11px;
    font-family: Montreal, 'Helvetica Neue', Helvetica, sans-serif;
    &:hover {
      color: ${gray100};
    }
  }
`;

export const FormFieldError = styled(ErrorMessage)`
  color: ${red500};
  font-size: 11px;
  font-family: Montreal, 'Helvetica Neue', Helvetica, sans-serif;
`;

export const FormField = styled(Field)`
  border: 1px solid ${gray800};
  height: 40px;
  padding: 12px;
  width: 100%;
  &:focus {
    border-color: ${gray600};
  }
  ::placeholder,
  ::-webkit-input-placeholder,
  ::-moz-placeholder,
  ::-ms-input-placeholder {
    color: ${gray800};
  }
`;

export const ShowHidePasswordButton = styled.button`
  position: absolute;
  right: 5px;
  top: 5px;
  bottom: 5px;
  border: none;
  color: black;
  font-size: 1rem;
  cursor: pointer;
  text-transform: uppercase;
  background-color: transparent;
  color: ${gray400};
  &:hover {
    color: ${gray100};
  }
`;

export const MainAuthModalWrapper = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  font-family: Architekt;
  font-size: 1.2rem;
  background-color: #fff;
`;

export const MainAuthTabBar = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 32px;
`;

export const MainAuthTab = styled.div<{ active?: boolean }>`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: ${darkLine};
  padding: 0.5rem 0;
  color: ${gray400};
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  &:hover {
    color: ${gray100};
  }
  ${({ active }) => active && `background-color: #fff;`}
`;

export const MainAuthTabContent = styled.div`
  padding: 15px 20px 20px 20px;
`;

export const LogoWrapper = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  margin: 15px 0 25px;
`;