import React, { FC, useState } from 'react';
import { Button, Space, Spin, Table } from 'antd';
import { Link, useNavigate, useParams } from 'react-router';
import { useApolloClient } from '@apollo/client';

import { extractParamName, extractParamValue } from '../../../../basic/Utils';
import ErrorModal from '../../../basic/ErrorModal';
import { useSearchDoctorAppointmentQuery } from '../../../../__generate/graphql-frontend'

export const DoctorAppointmentList: FC<{ selectedDoctorAppointment?: string | null, setSelectedDoctorAppointment?: (value: string) => void }> = ({ selectedDoctorAppointment, setSelectedDoctorAppointment }) => {

    const client = useApolloClient()

    const navigate = useNavigate();

    const { filterStr } = useParams()

    const columns = [
  {
    "title": "id",
    "key": "id",
    "dataIndex": "id"
  },
  {
    "title": "beginDate",
    "key": "beginDate",
    "dataIndex": "beginDate"
  },
  {
    "title": "descr",
    "key": "descr",
    "dataIndex": "descr"
  },
  {
    "title": "endDate",
    "key": "endDate",
    "dataIndex": "endDate"
  }
].concat((selectedDoctorAppointment === null) ? [] : [
        {
            "title": "actions",
            "key": "actions",
            "dataIndex": "actions"
        }])

    const [error, setError] = useState<Error | null>(null)

    const { data, loading, error: queryError } = useSearchDoctorAppointmentQuery(
        {
            variables: {
                cond: (filterStr && filterStr !== 'undefined' && selectedDoctorAppointment !== null ) ? `it.${extractParamName(filterStr)}.id=='${extractParamValue(filterStr)}'` : null
            }
        })

    const elemList = data?.searchDoctorAppointment.elems

    const mapToView = (list: typeof elemList) => {
        return (
            list?.map(elem => {
                return {
                    key: elem.id ?? "",
          actions: <Space>
            <Link to={`/ClinicScheduleAgg/DoctorAppointment/Update/${elem.id}`}>Update</Link>
            <Link to={`/ClinicScheduleAgg/DoctorAppointment/Delete/${elem.id}`}>Delete</Link>
          </Space>,
          id: elem.id,
                    beginDate: elem.beginDate,
                    descr: elem.descr,
                    endDate: elem.endDate,

                }
            })
        )
    }

    if (loading) return (<Spin tip="Loading..." />);
    if (queryError) {
        return (<ErrorModal error={queryError} setError={setError} />)
    } else {
    
        client.refetchQueries({include:["searchDoctorAppointment"]})
        return (
            <Space direction='vertical'>
                {selectedDoctorAppointment === undefined && <Button
                    onClick={() => {
                        navigate(`/ClinicScheduleAgg/DoctorAppointment/Create/${filterStr}`)
                    }}
                >
                    Create
                </Button>}
        
                <Table
                    columns={columns}
                    dataSource={mapToView(elemList)}
                    onRow={(record) => ({ onClick: event => { if (setSelectedDoctorAppointment) setSelectedDoctorAppointment(record.id) } })}
                />
            </Space>
        )
    }
}