import { LoginTypeReq, OrgCredentialsDto, UsersService } from "@schemax-academy/shared-models-and-services";
import { Button, Card, Col, Form, Input, Row, Select } from "antd";
import { useEffect, useState } from "react";
import { AlertMessages } from "../common";

export const ShareOrgCredentials = () => {
    const { Option } = Select;
    const service = new UsersService();
    const [orgData, setOrgData] = useState<any>([]);
    const [form] = Form.useForm();

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

    const getAllRegistedOrgs = () => {
        const req = new LoginTypeReq();
        req.loginType = 'organization';
        try {
            service.getAllRegistedOrgs(req).then((res) => {
                if (res.status) {
                    setOrgData(res.data);
                }
            });
        } catch (error) {
            throw error;
        }
    };

    const handleOrgChange = (value: any) => {
        const selectedOrg = orgData.find(org => org.usersId === value);

        if (selectedOrg) {
            form.setFieldsValue({
                orgMobileNo: selectedOrg.orgMobileNo || '',
                userName: selectedOrg.username || '',
                password: selectedOrg.password || '',
            });
        }
    };

    const shareCredentials = () => {
        form.validateFields().then(values => {
            console.log(values)
            const dto = new OrgCredentialsDto()
            dto.mobileNo = values.orgMobileNo
            dto.userName = values.userName
            dto.password = values.password
            dto.url = "http://apee.schemaxtech.in/"
            service.shareOrgCredentials(dto).then(res => {
                if (res.status) {
                    AlertMessages.getSuccessMessage("Credentials sent successfully");
                    localStorage.clear();
                    form.resetFields();
                } else {
                    AlertMessages.getErrorMessage(res.internalMessage);
                }
            })
        })
    }

    return (
        <Card>
            <Form form={form} >
                <Row gutter={16}>
                    <Col span={8}>
                        <Form.Item name="orgName" label="Organization Name">
                            <Select onChange={handleOrgChange}>
                                {orgData?.map(org => (
                                    <Option key={org.usersId} value={org.usersId}>
                                        {org.orgName || 'No Name'}
                                    </Option>
                                ))}
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item name="orgMobileNo" label="Organization Mobile No">
                            <Input />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item name="userName" label="User Name">
                            <Input />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item name="password" label="Password">
                            <Input />
                        </Form.Item>
                    </Col>
                </Row>
                <div style={{ display: 'flex', justifyContent: 'center' }}>
                    <Button type="primary" htmlType="submit" style={{ marginRight: '15px' }} onClick={shareCredentials}>
                        Submit
                    </Button>
                    <Button type="primary" onClick={() => form.resetFields()}>
                        Reset
                    </Button>
                </div>
            </Form>
        </Card>
    );
};