/**
 * Generic List accepts an array of fields to update any resource
 */

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

import { Link, match, useParams } from 'react-router-dom';

import { Typography, Modal, Select, Space, Switch, Popconfirm, message, DatePicker, Skeleton, Tabs } from 'antd';

import { Table, Button } from './../../../../lib';

import { ReloadOutlined, OrderedListOutlined, PicCenterOutlined, DeleteOutlined } from '@ant-design/icons';

import moment from 'moment';


import { MenusAPI, UserRolesAPI } from '../../..';

// import MenuList from '../menu-list/menu-list';
import GenericList from '../../../../modules/generic/components/generic-list/generic-list';

import { UsersAPI } from '../../..';

const { Title } = Typography;

const { TabPane } = Tabs;


const UserDetail = ({ history, model, columns, relativeAdd = false, match }) => {

    const actions = [];

    // const { params } = match;

    match = useParams();

    const id = match.id;

    console.log(model);

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

    const [user, setUser] = useState({});

    const [view, setView] = useState(false);

    const [visible, setVisible] = useState(false);

    const [single, setSingle] = useState({});


    useEffect(() => {

        loadData();
    }, []);


    const loadData = () => {
        setLoading(true);

        getRecords();
    };


    const getRecords = () => {
        setLoading(true);

        UsersAPI
            .getRecord({ id }).then((response) => {
                if (response && response.result && response.result.id) {

                    setUser(response.result)

                    setLoading(false);

                }
            })


    };


    function changeView(result) {
        setView(result);
    }

    function closeModal() {
        setVisible(false);
    }

    function refresh() {
        loadData();
    }

    return (

        <div className="generic-list">
            {/* Table Header */}
            <div className="table-header">
                <div className="table-title">
                    <Title level={4}>{model.name}</Title>

                    {/* <p>{loading ? 'Loading records' : `${record.length} records`}</p> */}
                </div>

                <div className="table-bar">
                    {/* Table Filters */}
                    <div className="table-filters">
                        <Space direction="vertical" size={12}></Space>
                    </div>
                    {/* Table Filters Ends */}

                    <div className="table-actions">
                        <div className="button-container">
                            <Space size="small">
                                <Button onClick={getRecords} size={'small'}>
                                    <ReloadOutlined />
                                </Button>

                                <Switch
                                    defaultChecked
                                    onChange={changeView}
                                    checked={view}
                                    checkedChildren={<OrderedListOutlined />}
                                    unCheckedChildren={<PicCenterOutlined />}
                                />

                                {/* Edit */}
                                {!model.ModalAddComponent ? null : (
                                    <Button type="dashed" onClick={() => {

                                        setSingle({ ...user });

                                        setVisible(true);
                                    }}>
                                        Edit
                                    </Button>
                                )}
                                {/* Edit Ends */}

                            </Space>
                        </div>
                    </div>
                </div>
            </div>

            {/* Table Header Ends */}

            {loading ? (
                <Skeleton />
            ) : (
                <>
                    <div className="card">
                        <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start' }}>
                            <div style={{ display: 'flex', flexDirection: 'column', padding: '3%' }}>
                                <table>

                                    <tr>
                                        <td>
                                            <h3>Name :</h3>
                                        </td>
                                        <td>
                                            <p>{user.name}</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <h3>Email :</h3>
                                        </td>
                                        <td>
                                            <p>{user.email}</p>
                                        </td>
                                    </tr>

                                    {/* <tr>
                                        <td>
                                            <h3>Cooperate Id :</h3>
                                        </td>
                                        <td>
                                            <p>{user.cooperate_id}</p>
                                        </td>
                                    </tr> */}
                                </table>
                            </div>
                        </div>

                    </div>
                </>
            )}

            {/* Add Modal */}
            <Modal destroyOnClose confirmLoading={loading} visible={visible} onCancel={closeModal} footer={null}>
                <model.ModalAddComponent
                    additional_queries={[
                        {
                            field: 'header_id',
                            value: id,
                        },
                    ]}
                    match={match}
                    model={model}
                    formContent={single}
                    callback={() => {
                        closeModal();
                    }}
                />
                {/* <FormCreator formContent={{ [model]: {} }} modelIndex="requestId" model={model} onSubmit={createRecord} config={step} /> */}
            </Modal>

            <Tabs>
                <TabPane tab="User Roles" key="1">
                    <GenericList
                        model={UserRolesAPI}
                        relativeAdd={true}
                        config={{
                            includes: 'role'
                        }}
                        additional_queries={[
                            {
                                field: 'user_id',
                                value: id,
                            },
                        ]}
                    />
                </TabPane>
            </Tabs>

        </div>


    );
}

function CardList({ model, data, url, ...props }) {
    return data.map((record, index) => {
        return <model.Card record={record} model={model} index={index} key={index} {...record} {...props} />;
    });
}
export default UserDetail;

