import React, { useEffect, useState } from 'react';
import { getSigns, addSign, downloadSigns, deleteSign } from '../services/signs';
import { Sign } from '../types/sign';
import SignComponent from './SignComponent';


const SignsPage: React.FC = () => {
    const [signs, setSigns] = useState<Sign[]>([]);
    const [newSign, setNewSign] = useState('');
    const [newSignError, setNewSignError] = useState<string | null>(null);
    const [loading, setLoading] = useState(true);

    const handleAddSign = async () => {
        addSign(newSign).then((sign) => {
            setSigns([...signs, sign]);
            setNewSign('');
            setNewSignError(null);
        }).catch((error) => {
            setNewSignError(error.message);
        });
    };

    const handleDownloadData = async () => {
        downloadSigns().then((blob: Blob) => {
            const url = window.URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', 'data.zip');
            document.body.appendChild(link);
            link.click();
            link.remove();
        }).catch((error: Error) => {
            console.log(error);
        });

    };

    const handleDeleteSign = async (id: number) => {
        deleteSign(id).then(() => {
            setSigns(signs.filter((sign) => sign.id !== id));
        });
    };


    useEffect(() => {
        // get the signs from the api
        getSigns().then((signs) => {
            console.log(signs)
            setSigns(signs);
            setLoading(false);
        });
    }, []);

    return (
        <div className="flex flex-col items-left bg-gray-100 min-h-screen">
            <div className="bg-white p-6 rounded-lg shadow-md">
                <div className="mb-4">
                    <input
                        className="border border-gray-400 p-2 rounded-lg w-full"
                        type="text"
                        value={newSign}
                        onChange={(event) => setNewSign(event.target.value)}
                        placeholder="Enter sign url"
                    />
                </div>
                <button className="bg-indigo-500 text-white py-2 px-4 rounded-lg hover:bg-indigo-600" onClick={handleAddSign}>
                    Add Sign
                </button>
                <button className="bg-indigo-500 text-white py-2 px-4 rounded-lg hover:bg-indigo-600 ml-2" onClick={handleDownloadData}>
                    Download Data
                </button>
            </div>
            {newSignError && <p className="text-red-500">{newSignError}</p>}

            {!loading ?
                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-5 mt-5">
                    {
                        signs.map((sign) => <SignComponent deleteSign={handleDeleteSign} key={sign.id} sign={sign} />)
                    }
                </div>

                :
                <p>Loading...</p>
            }
        </div>
    );
};

export default SignsPage;