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

import { Link } from 'react-router-dom'

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

import { Row, Tabs, Button, Skeleton, Typography } from "antd";


import FirebaseUtils from '../../../lib/utils/firebase.utils';


import "./approval-list.scss";

const { TabPane } = Tabs;

const { Title } = Typography;


export default function ApprovalList({ step, redirect }) {

    const { user } = useContext(GlobalContext);

    useEffect(() => {


    }, [])

    return (
        <div className="approval-list">


            <Title level={3}>

                {step.caption}

            </Title>


            <Tabs defaultActiveKey="0">

                {
                    user.locations.map((location, index) => {

                        return (
                            <TabPane tab={`${location} Files`} key={index}>

                                <RequestList step={step} location={location} redirect={redirect} />

                            </TabPane>
                        )
                    })
                }

            </Tabs>

        </div>
    );
}





function RequestList({ step, location, redirect }) {

    const { user } = useContext(GlobalContext);

    const [reports, setReports] = useState([]);

    const [loader, setLoader] = useState(true);

    function getData(filter) {

        setLoader(true);

        var queries = [];

        if (typeof step.queries === 'function') {
            queries = step.queries({ user, location });
        } else {
            queries = step.queries;
        }

        if (step.model == 'cancellations') {
            FirebaseUtils.getRecords(location, queries, step.model || 'requests').then((vehicles) => {

                setLoader(false);

                console.log(vehicles);

                setReports(vehicles[step.model || 'requests']);

            });
        } else {
            FirebaseUtils.getRequests(location, queries).then((vehicles) => {

                setLoader(false);

                console.log(vehicles);

                setReports(vehicles.requests);

            });
        }

    }


    useEffect(() => {

        getData();

    }, [])


    return (<><div className="list-header">

        <p className="page-desc">
            {loader ? 'Loading data' : `Found ${reports.length} results`}
        </p>
        <Button onClick={getData} type="secondary" size={'small'}>Refresh</Button>

    </div>

        <Row className="report-listing-wrapper">
            {
                loader ? (
                    <Skeleton type="listing" />
                )
                    :
                    (
                        <>
                            {
                                reports.map((report, index) => <step.Card step={step} redirect={redirect} request={report} index={index} key={index} />)
                            }
                        </>
                    )}
        </Row></>)

}

