import styled from '@emotion/styled';
import React, { useEffect, useState } from 'react';
import { EyeIcon, ProtectedIcon, XIcon } from './icons';

const VN_CODE = 'vi';

const VN_TEXT_LOCALE = {
  VALIDATE_CORRECT_PASSWORD_ERROR: 'Vui lòng nhập đúng mật khẩu',
  VALIDATE_EMPTY_PASSWORD_ERROR: 'Vui lòng nhập mật khẩu',
  PROTECTED_PAGE: 'Trang này đang được bảo vệ',
  ACCESS_PAGE: 'Vào trang',
  PASSWORD_PLACEHOLDER: 'Vui lòng nhập mật khẩu để tiếp tục',
};

const EN_TEXT_LOCALE = {
  VALIDATE_CORRECT_PASSWORD_ERROR: 'Please enter the correct password',
  VALIDATE_EMPTY_PASSWORD_ERROR: 'Please enter password',
  PROTECTED_PAGE: 'Protected page',
  ACCESS_PAGE: 'View page',
  PASSWORD_PLACEHOLDER: 'Please enter password to continue',
};

interface ProtectedViewProps {
  langCode?: string;
  setPassword?: (password: string) => void;
  password?: string | null;
  isLoading?: boolean;
}

export const ProtectedView: React.FC<ProtectedViewProps> = ({
  langCode,
  setPassword,
  password,
  isLoading,
}) => {
  const [inputPassword, setInputPassword] = useState(password || '');
  const [showPassword, setShowPassword] = useState(false);
  const [error, setError] = useState('');
  const isVNLang = langCode === VN_CODE || !langCode;
  const handleTogglePassword = () => {
    setShowPassword(!showPassword);
  };

  const translation = isVNLang ? VN_TEXT_LOCALE : EN_TEXT_LOCALE;

  useEffect(() => {
    if (password) {
      setError(translation.VALIDATE_CORRECT_PASSWORD_ERROR);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [password, isVNLang]);

  const handleSubmit = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    e.preventDefault();
    if (!inputPassword) {
      setError(translation.VALIDATE_EMPTY_PASSWORD_ERROR);
      return;
    } else {
      setShowPassword(false);
      setPassword?.(inputPassword);
    }
  };

  return (
    <ProtectedWrapper>
      <ProtectedModal>
        <CloseButton>
          <div
            style={{ cursor: 'pointer' }}
            onClick={() => window.history.go(-1)}
          >
            <XIcon />
          </div>
        </CloseButton>
        <ProtectedIcon />
        <ProtectedTitle>{translation.PROTECTED_PAGE}</ProtectedTitle>
        <form>
          <PasswordInputWrapper>
            <PasswordInputField
              type={showPassword ? 'text' : 'password'}
              id="password"
              value={inputPassword}
              onChange={(e) => setInputPassword(e.target.value)}
              hasError={!!error && !isLoading}
              placeholder={translation.PASSWORD_PLACEHOLDER}
            />
            <TogglePasswordButton type="button" onClick={handleTogglePassword}>
              <EyeIcon />
            </TogglePasswordButton>
          </PasswordInputWrapper>
          <ErrorMessage showError={!!error && !isLoading}>{error}</ErrorMessage>
          <ValidateButton type="submit" onClick={(e) => handleSubmit(e)}>
            {translation.ACCESS_PAGE}
          </ValidateButton>
        </form>
      </ProtectedModal>
    </ProtectedWrapper>
  );
};

const ProtectedWrapper = styled.div`
  color: #000;
  background: #f1f1f1;
  height: 100vh;
  text-align: center;
  display: grid;
  place-items: center;
`;

const ProtectedTitle = styled.div`
  font-size: 28px;
  font-weight: 500;
  line-height: 36px;
  text-align: center;
  padding: 0 16px 20px 16px;
`;

const CloseButton = styled.div`
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
`;

const ProtectedModal = styled.div`
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 468px;
  height: 260px;
  padding: 16px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0px 9px 28px 8px #0000000d, 0px 6px 16px 0px #00000014,
    0px 3px 6px -4px #0000001f;

  @media only screen and (max-width: 600px) {
    width: 300 px;
    height: 244 px;
  }
`;

const PasswordInputWrapper = styled.div`
  position: relative;
  width: 259px;
  transform: translateX(-20px);
`;

const PasswordInputField = styled.input<{ hasError: boolean }>`
  width: 259px;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
  padding-right: 30px;

  ${(props) =>
    props.hasError &&
    `
    border-color: red;
  `}
`;

const TogglePasswordButton = styled.button`
  position: absolute;
  top: 50%;
  right: -35px;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
`;

const ErrorMessage = styled.p<{ showError: boolean }>`
  margin: 8px 0 0 0;
  color: red;
  font-size: 14px;
  display: ${(props) => (props.showError ? 'block' : 'none')};
`;

const ValidateButton = styled.button`
  width: 110px;
  height: 32px;
  padding: 4px 24px 4px 24px;
  gap: 8px;
  margin-top: 14px;

  background: #7367f0;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    background-color: #a195fc;
  }
`;