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

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

import { Skeleton, Typography, Space, Popconfirm, Tabs } from 'antd';

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

import GenericList from '../generic-list/generic-list';

// import DetailLoader from '../../../../models/detail-loader';

import './generic-detail.scss';

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

const { Title } = Typography;

const { TabPane } = Tabs;


const GenericDetail = ({ history, model, match }) => {

    const actions = [];

    let { id } = useParams();

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

    const [record, setRecord] = useState({});

    const [selected, setSelected] = useState([]);

    const [relations, setRelations] = useState([]);

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

    function getRecords() {
        setLoading(true);
        // Get the records
        model.getRecord({ id }).then((result) => {
            // console.log(result);

            setRecord(result);

            model.getRelations(52).then((result) => {

                // console.log(result);

                setRelations(result.result.relationships);

                setLoading(false);

            })
        });
    }

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

                    {/* <p>{loading ? 'Loading records' : `${records[model.name].length} records`}</p> */}
                </div>

                <div className="table-bar">
                    {/* Table Filters */}
                    <div className="table-filters"></div>
                    {/* Table Filters Ends */}

                    <div className="table-actions">
                        <div className="button-container">
                            {selected.length ? (
                                <>
                                    {selected.length} selected .
                                    <Popconfirm
                                        title="Are you sure you want to delete the selected rows ? "
                                        // onConfirm={() => deleteSelected()}
                                        onCancel={() => { }}
                                        okText="Yes"
                                        cancelText="No"
                                    >
                                        <Button size="small">
                                            <DeleteOutlined />
                                        </Button>
                                    </Popconfirm>
                                </>
                            ) : null}

                            <Space size="small">
                                <Button onClick={() => { }} type="secondary" size={'small'}>
                                    <Link to={`/${model.link}/${id}/e`}>Edit</Link>
                                </Button>

                                <Button onClick={getRecords} type="secondary" size={'small'}>
                                    <ReloadOutlined />
                                </Button>
                            </Space>
                        </div>
                    </div>
                </div>
            </div>
            {/* Table Header Ends */}

            {loading ? (
                <Skeleton />
            ) : (
                <>

                    {/* Detail Screen */}
                    <Card className="detail-content">
                        {Object.keys(record).map((key) => {
                            return (
                                <>
                                    <div className="detail-wrapper">
                                        <div className="detail-element">
                                            <p>{key}</p>

                                            <h3>{record[key]}</h3>
                                        </div>
                                    </div>
                                </>
                            );
                        })}
                    </Card>
                    {/* Detail Screen Ends */}

                    {/* Relations */}
                    <div className="bottom-section">
                        <Tabs type="card">

                            {relations.filter((record) => record.relationship.reference_type_id === 10).map((model, index) => {

                                return (<TabPane tab={model.relationship.display_name} key={index}>

                                    <ModelLoader id={id} menu={model.relationship} />

                                    {/* <GenericList model={ModuleMenus} config={menuConfig} /> */}
                                </TabPane>)

                            })}

                        </Tabs>
                    </div>
                    {/* Relations Ends */}

                </>
            )}
        </div>
    );
};

/**
 * 
 */
function ModelLoader({ id, menu }) {

    // Queries for filtering module menus
    let menuConfig = { includes: '', queries: [{ field: 'model_id', value: id }] };

    // console.log(menu);

    const DetailModel = {};
    // const DetailModel = new DetailLoader({
    //     ...menu.reference_model,
    //     // path: menu.route,
    //     name: menu.reference_model.route_name,
    //     id: id
    // });

    return (<>

        <GenericList relativeAdd={true} model={DetailModel} config={menuConfig} />

    </>)

}


export default GenericDetail;
