import styled from 'styled-components';
import { useState } from 'react';

import LoginModal from './LoginModal';
import Button from '../../components/common/button/Button';
import Modal from '../common/modal/Modal';

import { Title, BtnWrapper, ButtonClose } from '../../styles/Components';
import { TextInput } from '../../styles/Components';
import { AuthLogin } from '../../apis';
import { useForm } from 'react-hook-form';
import { useNavigate } from 'react-router-dom';

const LoginForm = () => {
	const [stateModal, setStateModal] = useState('hidden');
	const [errorText, setErrorText] = useState('');
	const navigate = useNavigate();

	const handleModal = () => {
		if (stateModal === 'hidden') {
			setStateModal('view');
		} else {
			setStateModal('hidden');
		}
	};

	const { register, handleSubmit, watch } = useForm();

	const values = watch();

	const onSubmit = async data => {
		const result = await AuthLogin(data);
		setErrorText(result.data.message);

		// console.log(result.data.message);

		if (result.status === -1) {
			setStateModal('view');
		} else if (result.data.message === 'INIT') {
			sessionStorage.setItem('token', result.data.access_token);
			navigate('/account/edit');
		} else {
			sessionStorage.setItem('token', result.data.access_token);
			navigate('/main');
		}
	};

	return (
		<>
			<FormWrapper action="" $flow="column" onSubmit={handleSubmit(onSubmit)}>
				<InputWrapper>
					<TextInput fontSize="15px" type="text" $padding="16px 20px" name="email" placeholder="ID를 입력하세요(sample@lotte.net)" {...register('email')} />
					<TextInput fontSize="15px" type="password" $padding="16px 20px" name="password" placeholder="비밀번호를 입력하세요" {...register('password')} />
				</InputWrapper>
				<Button
					type="submit"
					size="large"
					text="로그인"
					width="100%"
					theme={values.email && values.password ? 'primary' : 'disable'}
					errorMessage={values.email && values.password ? false : true}
				/>
			</FormWrapper>
			{errorText && !errorText.includes('비밀번호 기간 만료') ? (
				<LoginModal stateModal={stateModal} handleModal={handleModal} errorText={errorText} />
			) : (
				<Modal $padding="30px" $view={stateModal}>
					<BtnWrapper $justify="flex-end">
						<ButtonClose onClick={() => handleModal('hidden')} />
					</BtnWrapper>
					<Title $align="center">로그인에 실패하였습니다.</Title>
					<NoticeSummary $maxwidth="500px">
						<table>
							<tbody>
								<tr>
									<th>불가 사유 : </th>
									<td>{errorText}</td>
								</tr>
							</tbody>
						</table>
					</NoticeSummary>
					<NoticeDetail>
						<div>
							비밀번호 기간 갱신은 관리자 메일을 통해
							<br />
							문의 해주시기 바랍니다.
						</div>
						<br />
						관리자문의 : <a href="caliverse@caliverse.com">caliverse@caliverse.com</a>
					</NoticeDetail>
					<BtnWrapper $gap="10px">
						<Button
							text="확인"
							theme="line"
							size="large"
							width="100%"
							handleClick={e => {
								e.preventDefault();
								handleModal('hidden');
							}}
						/>
					</BtnWrapper>
				</Modal>
			)}
		</>
	);
};

export default LoginForm;

const FormWrapper = styled.form`
	margin-top: 40px;
`;

const InputWrapper = styled.div`
	display: flex;
	flex-flow: column;
	gap: 6px;
	margin-bottom: 20px;
`;

const NoticeSummary = styled.div`
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	padding: 20px 40px;
	margin-bottom: 20px;
	max-width: ${props => props.$maxwidth || 'auto'};
	table {
		th {
			width: 100px;
			text-align: left;
			font-weight: 600;
		}
		th,
		td {
			padding: 8px 0;
		}
	}
`;

const NoticeDetail = styled.div`
	background: #f6f6f6;
	padding: 30px 20px;
	margin-bottom: 20px;
	line-height: 2;
	text-align: ${props => props.$align || 'left'};
	div {
		font-weight: bold;
	}
	a {
		color: blue;
	}
`;
