import { useEffect, useState } from 'react';
import PwaBottomSheet from './PwaBottomSheet';
import { pwaTaskStatusOptions } from './pwaTaskMeta';

export default function PwaSprintStatusSheet({ task, open, saving, onClose, onSubmit }) {
  const [status, setStatus] = useState(task?.status || 'todo');

  useEffect(() => {
    if (open && task) setStatus(task.status || 'todo');
  }, [open, task]);

  return (
    <PwaBottomSheet
      open={open}
      title="تغییر وضعیت تسک"
      onClose={onClose}
      footer={(
        <>
          <button type="button" className="pwa-sheet-cancel" onClick={onClose} disabled={saving}>انصراف</button>
          <button type="button" className="pwa-sheet-submit" onClick={() => onSubmit(status)} disabled={saving || !task || status === task.status}>
            {saving ? 'در حال ذخیره...' : 'ثبت وضعیت'}
          </button>
        </>
      )}
    >
      <div className="pwa-status-options">
        {pwaTaskStatusOptions.map((item) => (
          <button key={item.value} type="button" className={status === item.value ? 'active' : ''} onClick={() => setStatus(item.value)}>
            {item.label}
          </button>
        ))}
      </div>
    </PwaBottomSheet>
  );
}
