import React, { useCallback, useState } from "react";
import { Form, Input, Button, Layout, message } from "antd";
import { UserOutlined, LockOutlined, TagOutlined } from "@ant-design/icons";
import { useHistory } from "react-router-dom";

import styles from "./Login.module.scss";
import ky from "ky";

export function Signup() {
  const [error, setError] = useState<boolean>(false);
  const [check, setCheck] = useState<boolean>(false);
  const history = useHistory();

  const handleSignup = useCallback(
    async ({ user_id, password, password_check, name }) => {
      if (password !== password_check) {
        return setCheck(true);
      } else {
        setCheck(false);
      }

      setError(false);
      try {
        const body = new URLSearchParams();
        body.set("user_id", user_id);
        body.set("password", password);
        body.set("name", name);

        await ky.post("/users/signup/", { body });

        message.success("회원가입이 완료되었습니다");
        history.push("/login");
      } catch {
        setError(true);
      }
    },
    [history]
  );

  return (
    <Layout className={styles.layout}>
      <Layout.Content className={styles.content}>
        <Form name="signup" onFinish={handleSignup}>
          <Form.Item
            name="user_id"
            rules={[{ required: true, message: "아이디를 입력하세요" }]}
            {...(error && {
              validateStatus: "error",
            })}
          >
            <Input prefix={<UserOutlined />} placeholder="아이디" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: "비밀번호를 입력하세요" }]}
            {...(error && {
              validateStatus: "error",
              help: "로그인에 실패했습니다",
            })}
          >
            <Input
              prefix={<LockOutlined />}
              type="password"
              placeholder="비밀번호"
            />
          </Form.Item>
          <Form.Item
            name="password_check"
            rules={[
              { required: true, message: "비밀번호를 한번 더 입력하세요" },
            ]}
            {...(error && {
              validateStatus: "error",
              help: "로그인에 실패했습니다",
            })}
            {...(check && {
              validateStatus: "error",
              help: "비밀번호가 일치하지 않습니다",
            })}
          >
            <Input
              prefix={<LockOutlined />}
              type="password"
              placeholder="비밀번호 확인"
            />
          </Form.Item>
          <Form.Item
            name="name"
            rules={[{ required: true, message: "이름을 입력하세요" }]}
            {...(error && {
              validateStatus: "error",
            })}
          >
            <Input prefix={<TagOutlined />} placeholder="이름" />
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit">
              회원 가입
            </Button>
          </Form.Item>
        </Form>
      </Layout.Content>
    </Layout>
  );
}