import React, { useEffect, useState, useContext } from 'react';

import { Form, Input, Button, Select, Typography, Skeleton, Radio, InputNumber } from 'antd';

import { GlobalContext } from '../../../../Store';

import { Location } from '../../../../../core/utils/location.utils';

import { Pages, Models, Modules, Menus, Process } from '../../../../../core/models/';

const { Title } = Typography;

const { Option } = Select;

export default function ProcessAdd({ model, edit, history, additional_queries, match, ...props }) {

    const [loading, setLoading] = useState(true);

    const [form] = Form.useForm();

    const [process, setProcess] = useState([]);

    const [subprocess, setSubprocess] = useState([]);

    const [response, setReponse] = useState([]);

    const { user } = useContext(GlobalContext);

    const { params } = match;

    useEffect(() => {

        getProcess();

        getSubProcess();

        if (params.id) {
            getRecord(params.id);
        } else {
            setLoading(false);
        }
    }, []);

    function getRecord(id) {
        // console.log(id);

        Menus.getDetail(id).then((result) => {
            console.log(result);
            setReponse(result);

            setLoading(false);
        });
    }

    /**
     * Load the Process
     */
    const getProcess = () => {

        Process.get([]).then((result) => {
            // console.log(result);

            setProcess(result.process);
        });
    };

    /**
     * Load the Sub Process
     */
    const getSubProcess = () => {

        model.get([]).then((result) => {
            // console.log(result);

            setSubprocess(result.sub_process);
        });
    };

    const onSubmit = (values) => {
        // console.log(values);

        // Add the mapping id
        additional_queries.forEach(({ field, value }) => {

            values = {
                ...values,
                [field]: value
            }
        })

        // Params
        if (params.id) {
            // Update of model
            model.update(params.id, values, user).then(() => {
                Location.back();
            });
        } else {
            // add new model
            model.add(values, user).then(() => {
                Location.back();
            });
        }
    };

    return (
        <section className="collection-add">
            <Title level={4}>{edit ? 'Edit' : 'Add'} Process</Title>

            {loading ? (
                <Skeleton />
            ) : (
                <Form initialValues={response} form={form} layout="vertical" onFinish={onSubmit}>

                    {/* Name */}
                    <Form.Item name="name" label="Name" required>
                        <Input placeholder="Enter name" />
                    </Form.Item>
                    {/* Name Ends */}

                    {/* Description */}
                    <Form.Item name="description" label="Description" required>
                        <Input placeholder="Enter description" />
                    </Form.Item>
                    {/* Description Ends */}

                    {/* Active */}
                    <Form.Item label="Active" name="active" required>
                        <Radio style={{ width: '100%' }}>
                            {[true, false].map((model) => (
                                <Option value={model}>{model ? 'Yes' : 'No'}</Option>
                            ))}
                        </Radio>
                    </Form.Item>
                    {/* Active Ends */}

                    {/* Order */}
                    <Form.Item name="order" label="Order" required>
                        <InputNumber placeholder="Enter order" />
                    </Form.Item>
                    {/* Order Ends */}

                    {/* Type */}
                    <Form.Item name="type" label="Type" required>
                        <Radio style={{ width: '100%' }}>
                            {['hierarchical', 'parallel'].map((model) => (
                                <Option value={model}>{model}</Option>
                            ))}
                        </Radio>
                    </Form.Item>
                    {/* Order Ends */}

                    {/* Process */}
                    <Form.Item label="Trigger Process (On Completion)" name="trigger_process_ids" required>
                        <Select style={{ width: '100%' }} multiple>
                            {process.map((record) => (
                                <Option value={record.id}>{record.name}</Option>
                            ))}
                        </Select>
                    </Form.Item>
                    {/* Process Ends */}

                    {/* Sub Process Ids */}
                    <Form.Item label="Trigger Sub Process (On Completion)" name="trigger_sub_process_ids" required>
                        <Select style={{ width: '100%' }} multiple>
                            {subprocess.map((record) => (
                                <Option value={record.id}>{record.name}</Option>
                            ))}
                        </Select>
                    </Form.Item>
                    {/* Sub Process Ids Ends */}

                    <Form.Item>
                        <Button htmlType={'submit'} type="primary">
                            Submit
                        </Button>
                    </Form.Item>
                </Form>
            )}
        </section>
    );
}
