import React, { useState } from 'react';
import { Button } from 'primereact/button';
import { Column } from 'primereact/column';
import { FilterMatchMode } from 'primereact/api';
import { TSizeOptionValue } from '../../types/DataTable.types';
import { api } from '../../services/api';
import ChatGptModal from './ChatGptModal';
import { DataTable } from 'primereact/datatable';
import { Card } from 'primereact/card';

const CanvasEndpoints: React.FC = () => {
    const [showChatGptModal, setShowChatGptModal] = useState(false);
    const [endpoints, setEndpoints] = useState<any[]>([]);
    const [filters, setFilters] = useState<any>(null);
    const [globalFilterValue, setGlobalFilterValue] = useState('');
    const [showCreateModal, setShowCreateModal] = useState(false);
    const [newEndpoint, setNewEndpoint] = useState({ name: '', method: '', path: '', description: '' });
    const sizeOptions: { label: string; value: TSizeOptionValue }[] = [
        { label: 'Small', value: 'small' },
        { label: 'Normal', value: 'normal' },
        { label: 'Large', value: 'large' },
    ];
    const [size, setSize] = useState<TSizeOptionValue>(sizeOptions[0].value);

    const fetchEndpoints = async () => {
        try {
            const response = await api('get', '/api/v1/canvas-api/endpoints');
            setEndpoints(response.data);
        } catch (error) {
            console.error('Failed to fetch endpoints:', error);
        }
    };

    const initFilters = () => {
        setFilters({
            global: { value: null, matchMode: FilterMatchMode.CONTAINS },
        });
        setGlobalFilterValue('');
    };

    const clearFilter = () => {
        initFilters();
    };

    const onGlobalFilterChange = (e: { target: { value: any } }) => {
        const value = e.target.value;
        let _filters = { ...filters };
        _filters['global'].value = value;
        setFilters(_filters);
        setGlobalFilterValue(value);
    };

    return (
        <div className="p-4">
            <Card className="mb-4">
                <div className="flex justify-between items-center">
                    <div>
                        <h1 className="text-2xl font-bold mb-2">Canvas Endpoints</h1>
                        <p className="text-gray-400">Manage and test your Canvas API endpoints</p>
                    </div>
                    <div className="flex gap-2">
                        <Button
                            label="Create Endpoint"
                            icon="pi pi-plus"
                            onClick={() => setShowCreateModal(true)}
                        />
                        <Button
                            label="Ask ChatGPT"
                            icon="pi pi-comments"
                            onClick={() => setShowChatGptModal(true)}
                            className="p-button-primary"
                        />
                    </div>
                </div>
            </Card>
            <DataTable value={endpoints} paginator rows={10} showGridlines responsiveLayout="scroll" emptyMessage="No endpoints found.">
                <Column field="id" header="ID" sortable filter style={{ width: '10%' }} />
                <Column field="name" header="Name" sortable filter style={{ width: '20%' }} />
                <Column field="method" header="Method" sortable filter style={{ width: '10%' }} />
                <Column field="path" header="Path" sortable filter style={{ width: '40%' }} />
            </DataTable>
            <ChatGptModal
                visible={showChatGptModal}
                onHide={() => setShowChatGptModal(false)}
            />
        </div>
    );
};

export default CanvasEndpoints; 