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

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

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

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

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

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

const { Title } = Typography;

const { TabPane } = Tabs;


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

    let { id } = useParams();

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

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

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

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

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

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

            setRecord(result);

            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.route}/${id}/e`}>Edit</Link>
                                </Button>

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

            {loading ? (
                <Skeleton />
            ) : (
                <>
                    <div 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>
                                </>
                            );
                        })}
                    </div>

                    <div className="bottom-section">
                        <Tabs type="card">
                            <TabPane tab="Lookup Values" key="1">
                                <GenericList relativeAdd={true} model={LookupValues} config={menuConfig} />
                            </TabPane>
                        </Tabs>
                    </div>
                </>
            )}
        </div>
    );
};

export default LookupDetail;
