import { DistrictCodeReqDto, MasterService, UsersService } from '@schemax-academy/shared-models-and-services';
import { Button, Card, Form, Input, Select } from 'antd';
import { useForm } from 'antd/lib/form/Form';
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { AlertMessages } from '../common';
import './signup.css';

const { Option } = Select;

export const SignUpForm = () => {
  const service = new UsersService();
  const [formRef] = useForm();
  const pathToRedirect = '/login';
  const pathToRedirectOrg = '/shareOrgCredentials';
  const navigate = useNavigate();
  const [loginType, setLoginType] = useState('applicant');
  const [districtsData, setDistrictsData] = useState<any>([]);
  const [mandalsData, setMandalsData] = useState<any>([]);
  const [panchayatsData, setPanchayatsData] = useState<any>([]);

  const masterService = new MasterService();

  useEffect(() => {
    getAllDistrictCodes();
  }, []);

  const getAllDistrictCodes = () => {
    masterService.getAllDistrictCodes().then((res) => {
      if (res.status) {
        setDistrictsData(res.data);
      }
    }).catch((err) => {
      console.log(err.message);
    });
  };

  const handleDistCodeChange = (value: any) => {
    const req = new DistrictCodeReqDto();
    req.districtCode = value;
    masterService.getMandalsByDistCodes(req).then((res) => {
      if (res.status) {
        setMandalsData(res.data);
      }
    }).catch((err) => {
      console.log(err.message);
    });
  };

  const handleMandalChange = (value: any) => {
    const req = new DistrictCodeReqDto();
    req.mandalCode = value;
    masterService.getPanchayatsByMandalCodes(req).then((res) => {
      if (res.status) {
        setPanchayatsData(res.data);
      }
    }).catch((err) => {
      console.log(err.message);
    });
  };

  const generateUsername = (district, mandal, panchayat) => {
    const specialCharacter = '@';
    const number = '1';
    return (
      district.slice(0, 3).toLowerCase() +
      mandal.slice(0, 3).toLowerCase() +
      panchayat.slice(0, 3).toLowerCase() +
      specialCharacter +
      number
    );
  };

  const handlePanchayatChange = (value: any) => {
    const district = formRef.getFieldValue('district');
    const mandal = formRef.getFieldValue('mandals');
    const panchayat = value;
    const username = generateUsername(district, mandal, panchayat);
    formRef.setFieldsValue({ panchayats: value, username });
  };

  const handleLoginTypeChange = (value: string) => {
    setLoginType(value);
  };

  const submitUser = () => {
    formRef.validateFields().then(values => {
      if (values.password !== values.confirmPassword) {
        return AlertMessages.getErrorMessage('Password do not match');
      }
      service.create({ ...values }).then(res => {
        if (res.status) {
          AlertMessages.getSuccessMessage("User Created Successfully");
          if (loginType === "organization") {
            navigate(pathToRedirectOrg);
          }
          localStorage.clear();
          formRef.resetFields();
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }).catch(err => {
        AlertMessages.getErrorMessage(err.message);
      });
    });
  };

  return (
    <div style={{ backgroundColor: '#011A27', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
      <div style={{ backgroundColor: '#063852', padding: '20px', width: '90%', maxWidth: '400px', borderRadius: '8px' }}>
        <h1 style={{ textAlign: 'center', color: 'white' }}>Sign up</h1>
        <Card style={{ backgroundColor: 'beige' }}>
          <Form
            name="basic"
            form={formRef}
            layout="vertical"
            initialValues={{ loginType: 'applicant' }}
            autoComplete="off"
          >
            <Form.Item
              label={<span style={{ color: 'black' }}>Login Type</span>}
              name="loginType"
              rules={[{ required: true, message: 'Please select your login type!' }]}
            >
              <Select placeholder="Select Login Type" onChange={handleLoginTypeChange}>
                <Option value="applicant">Applicant</Option>
                <Option value="organization">Organization</Option>
                <Option value="registerer">Registerer</Option>
              </Select>
            </Form.Item>

            {loginType === 'applicant' && (
              <>
                <Form.Item
                  label={<span style={{ color: 'black' }}>Districts</span>}
                  name="district"
                  rules={[{ required: true, message: 'Please Select your District!' }]}
                >
                  <Select
                    placeholder="Select District"
                    onChange={(value) => handleDistCodeChange(value)}
                  >
                    {districtsData?.map((data) => (
                      <Option key={data.code} value={data.code}>
                        {data.code}-{data.officialName}
                      </Option>
                    ))}
                  </Select>
                </Form.Item>
                <Form.Item
                  label={<span style={{ color: 'black' }}>Mandals</span>}
                  name="mandals"
                  rules={[{ required: true, message: 'Please Select your Mandal!' }]}
                >
                  <Select placeholder="Select Mandal" onChange={(value) => handleMandalChange(value)}>
                    {mandalsData?.map((data) => (
                      <Option key={data.id} value={data.mandalName}>
                        {data.mandalName}
                      </Option>
                    ))}
                  </Select>
                </Form.Item>
                <Form.Item
                  label={<span style={{ color: 'black' }}>Panchayats</span>}
                  name="panchayats"
                  rules={[{ required: true, message: 'Please Select your Panchayat!' }]}
                >
                  <Select placeholder="Select Panchayat" onChange={handlePanchayatChange}>
                    {panchayatsData?.map((data) => (
                      <Option key={data.id} value={data.panchayatName}>
                        {data.panchayatName}
                      </Option>
                    ))}
                  </Select>
                </Form.Item>
              </>
            )}

            {loginType === 'organization' && (
              <>
                <Form.Item
                  label={<span style={{ color: 'black' }}>Org Name</span>}
                  name="orgName"
                  rules={[{ required: true, message: 'Please enter your organization name!' }]}
                >
                  <Input placeholder='Enter Organization Name' />
                </Form.Item>
                <Form.Item
                  label={<span style={{ color: 'black' }}>Org Mobile Number</span>}
                  name="orgMobileNo"
                  rules={[{ required: true, message: 'Please enter your organization mobile number!' }]}
                >
                  <Input placeholder='Enter Org Mobile Number' />
                </Form.Item>
              </>
            )}

            <Form.Item
              label={<span style={{ color: 'black' }}>User Name</span>}
              name="username"
              rules={[
                { required: true, message: 'Please enter your username!' },
                { min: 8, message: 'Username must be at least 8 characters long!' },
                { pattern: /^[a-zA-Z0-9!@]*$/, message: 'Username should only contain alphabets, special characters, and numbers!' },
              ]}
            >
              <Input placeholder="Enter your username" />
            </Form.Item>

            <Form.Item
              label={<span style={{ color: 'black' }}>Password</span>}
              name="password"
              rules={[
                { required: true, message: 'Please input your password!' },
                { min: 8, message: 'Password must be at least 8 characters!' },
                {
                  pattern: /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6,16}$/,
                  message: 'Password must contain at least one uppercase letter, one lowercase letter, one number, and one special character!',
                },
              ]}
              validateTrigger={['onBlur']}
            >
              <Input.Password placeholder="Enter Password" />
            </Form.Item>

            <Form.Item
              label={<span style={{ color: 'black' }}>Confirm Password</span>}
              name="confirmPassword"
              dependencies={['password']}
              rules={[
                { required: true, message: 'Please confirm your password!' },
                ({ getFieldValue }) => ({
                  validator(_, value) {
                    if (!value || getFieldValue('password') === value) {
                      return Promise.resolve();
                    }
                    return Promise.reject(new Error('The two passwords that you entered do not match!'));
                  },
                }),
              ]}
              validateTrigger={['onBlur']}
            >
              <Input.Password placeholder="Enter Confirm Password" />
            </Form.Item>

            <Form.Item>
              <Button type="primary" block onClick={submitUser}>
                Sign Up
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
    </div>
  );
};

export default SignUpForm;