import React, { FC, useState } from 'react';
import { Button, Space, Spin, Card, Row, Col } 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 [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 renderCards = (list: typeof elemList) => {
        return (
            <Row gutter={[16, 16]}>
                {list?.map(elem => (
                    <Col xs={24} sm={12} md={8} lg={6} key={elem.id}>
                        <Card
                            title={`Запись #${elem.id}`}
                            size="small"
                            hoverable
                            onClick={() => { if (setSelectedDoctorAppointment) setSelectedDoctorAppointment(elem.id || '') }}
                            style={{ 
                                cursor: setSelectedDoctorAppointment ? 'pointer' : 'default',
                                backgroundColor: selectedDoctorAppointment === elem.id ? '#f0f8ff' : 'white'
                            }}
                            actions={selectedDoctorAppointment !== null ? [
                                <Link key="update" to={`/ClinicScheduleAgg/DoctorAppointment/Update/${elem.id}`}>
                                    Редактировать
                                </Link>,
                                <Link key="delete" to={`/ClinicScheduleAgg/DoctorAppointment/Delete/${elem.id}`}>
                                    Удалить
                                </Link>
                            ] : undefined}
                        >
                            <div style={{ marginBottom: 8 }}>
                                <strong>Дата начала:</strong> {elem.beginDate}
                            </div>
                            <div style={{ marginBottom: 8 }}>
                                <strong>Дата окончания:</strong> {elem.endDate}
                            </div>
                            <div>
                                <strong>Описание:</strong> {elem.descr || 'Не указано'}
                            </div>
                        </Card>
                    </Col>
                ))}
            </Row>
        )
    }

    if (loading) return (<Spin tip="Загрузка..." />);
    if (queryError) {
        return (<ErrorModal error={queryError} setError={setError} />)
    } else {
    
        client.refetchQueries({include:["searchDoctorAppointment"]})
        return (
            <Space direction='vertical' style={{ width: '100%' }}>
                {selectedDoctorAppointment === undefined && <Button
                    type="primary"
                    onClick={() => {
                        navigate(`/ClinicScheduleAgg/DoctorAppointment/Create/${filterStr}`)
                    }}
                >
                    Создать запись
                </Button>}
        
                {elemList && elemList.length > 0 ? (
                    renderCards(elemList)
                ) : (
                    <Card>
                        <div style={{ textAlign: 'center', padding: '20px' }}>
                            Записи не найдены
                        </div>
                    </Card>
                )}
            </Space>
        )
    }
}