'use client';

import React, { useState } from 'react';
import { Form, Input, Button, Typography } from 'antd';
import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';
import Link from 'next/link';
import Image from 'next/image';
import { signupPost } from '../signup/service';

const { Title } = Typography;

const SignupPage: React.FC = () => {
  const [showPassword, setShowPassword] = useState(false);

  const onFinish = (values: { first_name: string; last_name: string; email: string; password: string; }): void => {
    signupPost(values)
      .then((res) => {
        console.log('res...', res);
      })
      .catch((err) => {
        console.log('err...', err);
      });
  };

  const togglePasswordVisibility = (): void => {
    setShowPassword(!showPassword);
  };

  return (
    <div className="auth-page">
      <div className="login-box">
        <div className="login-box-header">
          <div className="logo">
            <Image src="/images/dummy_logo.png" alt="logo" height={50} width={190} />
          </div>
        </div>

        <div className="login-box-content">
          <Title className="text-center">Sign Up</Title>

          <Form name="signup" onFinish={onFinish}>
            <Form.Item
              name="first_name"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Input placeholder="First Name" />
            </Form.Item>

            <Form.Item
              name="last_name"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Input placeholder="Last Name" />
            </Form.Item>

            <Form.Item
              name="email"
              rules={[
                {
                  required: true,

                  message: 'Please Enter an Email Address!',
                },

                {
                  type: 'email',

                  message: 'Invalid email format!',
                },
              ]}
            >
              <Input
                placeholder="Email"
              />
            </Form.Item>

            <Form.Item
              name="password"
              rules={[
                {
                  required: true,

                  message: 'Please Enter Your password',
                },

                {
                  min: 8,

                  message: 'Password must be at least 8 characters long!',
                },
              ]}
            >
              <Input.Password
                type={showPassword ? 'text' : 'password'}
                placeholder="Password"
                suffix={
                  <span onClick={togglePasswordVisibility}>
                    {showPassword ? <EyeTwoTone /> : <EyeInvisibleOutlined />}
                  </span>
                }
              />
            </Form.Item>

            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                size="large"
                className="login-form-button"
              >
                                Sign Up
              </Button>
            </Form.Item>

            <div className="login-box-footer">
              <Link href="./login">Login</Link>
            </div>
          </Form>
        </div>
      </div>
    </div>
  );
};

export default SignupPage;