import { Button } from "primereact/button";
import {dateToString} from "../../../../common/Helper.tsx";
import { Dialog } from "primereact/dialog";
import { Calendar } from "primereact/calendar";

export default function  DateEditComponent(title: string, dialogDateName: string, value: Date | null,
                   isDialogVisible: boolean, setDialogVisible: (value: boolean) => void,
                   editingValue: Date | null, onChange: (date: Date | null) => void,
                   saving: boolean, onSave: () => void){
    return (
        <div>
            <div className='uppercase text-xs text-400 mb-1'>
                <b>{title}</b>
            </div>
            <div className='text-sm flex flex-row justify-content-between align-items-center w-full'>
                <span className={`text-${value == null ? '200' : 'blue-500'}`}>{(dateToString(value, false, true))}</span>
                <Button icon="pi pi-pencil" severity='secondary' text className='p-0' size='small'
                        disabled={isDialogVisible || saving}
                        onClick={() => setDialogVisible(true)} />
            </div>

            {ShowDateEditDialog(dialogDateName, isDialogVisible, () => setDialogVisible(false),
                editingValue, onChange, saving, onSave)}
        </div>
    );
}

function ShowDateEditDialog(dateName: string, isDialogVisible: boolean, onHide: () => void,
                            value: Date | null, onChange: (date: Date | null) => void,
                            saving: boolean, onSave: () => void){
    return (
        <Dialog header={`Редактировать ${dateName}`}
                headerClassName='p-3 pt-2 pb-1'
                contentClassName='p-3 pt-0'
                style={{ width: '50vw' }}
                visible={isDialogVisible} onHide={onHide}>
            <div className='flex flex-column gap-3 mt-3'>
                <Calendar value={value} inline showButtonBar showWeek
                          inputClassName='p-inputtext-sm'
                          onChange={(e) => onChange(e.value ?? null)} />

                <span className={`text-${value == null ? '200' : 'blue-500'}`}>{(dateToString(value, false, true))}</span>
            </div>
            <Button label='Сохранить' className='w-full mt-4' loading={saving} onClick={onSave} />
        </Dialog>
    );
}