import { useState } from 'react';
import { Dialog } from 'primereact/dialog';
import { Button } from 'primereact/button';
import { FaEye, FaUser, FaUsers, FaPlus } from 'react-icons/fa';
import { Divider } from 'primereact/divider';
import { FaPencil } from 'react-icons/fa6';

const CurrentViewComponent = ({ item }: { item: any }) => {
    const [visible, setVisible] = useState(false);
    const [unfinishedView, setUnfinishedView] = useState(item.lastUnfinishedView ?? '00:00:00');

    const handleAddView = () => {
        setVisible(true);
    };

    const handleSave = () => {
        // Логика сохранения нового просмотра
        setVisible(false);
    };

    return (
        <>
            <div className="flex flex-wrap flex-row justify-content-between gap-2 m-0 align-items-center border-round-md">
                {/*<h4 className="py-2 my-0 pl-2 pr-3 col-auto flex align-items-center surface-100 border-round-md">*/}
                {/*    */}
                {/*</h4>*/}
                <FaEye className="text-cyan-500" />
                <Divider layout="vertical" type="solid" className="py-0 mx-2" />
                <FaUser className="text-300" /> <span className="ml-1">{item.myViews ?? 0}</span>
                <Divider layout="vertical" type="dashed" className="py-0 mx-2" />
                <FaUsers className="text-300" /> <span className="ml-1">{item.views ?? '–'}</span>
                <Divider layout="vertical" type="dashed" className="py-0 ml-4 mr-2" />
                <span className="ml-2 text-500">({unfinishedView})</span>
                <Button icon={<FaPencil />} size='small' className="ml-2" onClick={handleAddView} />
                <Button icon={<FaPlus />} size='small' className="ml-2" onClick={handleAddView} />
            </div>

            <Dialog header="Редактировать просмотр" visible={visible} onHide={() => setVisible(false)}>
                <div className="p-fluid">
                    <label>Время последнего незавершённого просмотра:</label>
                    <input type="text" value={unfinishedView} onChange={(e) => setUnfinishedView(e.target.value)} className="p-inputtext p-component" />
                    <Button label="Сохранить" className="p-button-sm mt-2" onClick={handleSave} />
                </div>
            </Dialog>
        </>
    );
};

export default CurrentViewComponent;
