const priorityLabels = [
  { value: 'low', label: 'کم' },
  { value: 'medium', label: 'متوسط' },
  { value: 'high', label: 'زیاد' },
  { value: 'urgent', label: 'فوری' },
];

export default function PwaTaskFormFields({ form, errors, projects, users, priorities, lockProject = false, onChange }) {
  const selectedProject = projects.find((project) => String(project.id) === String(form.project_id));
  const projectUsers = selectedProject?.members?.length ? selectedProject.members : users;
  const priorityOptions = priorities?.length ? priorities : priorityLabels;

  return (
    <div className="pwa-task-form">
      <PwaField label="عنوان تسک" error={errors.title} required>
        <input
          value={form.title}
          onChange={(event) => onChange('title', event.target.value)}
          placeholder="مثلاً طراحی صفحه موبایل"
          maxLength={255}
        />
      </PwaField>

      <PwaField label="انتخاب پروژه" error={errors.project_id} required>
        <select value={form.project_id} onChange={(event) => onChange('project_id', event.target.value)}>
          <option value="">پروژه را انتخاب کنید</option>
          {projects.map((project) => <option key={project.id} value={project.id}>{project.title}</option>)}
        </select>
        {lockProject && selectedProject && <em className="pwa-field-note">پروژه از صفحه جزئیات انتخاب شده است.</em>}
      </PwaField>

      <PwaField label="انتخاب مسئول" error={errors.assignee_id}>
        <select value={form.assignee_id} onChange={(event) => onChange('assignee_id', event.target.value)}>
          <option value="">بدون مسئول</option>
          {projectUsers.map((user) => <option key={user.id} value={user.id}>{user.name}</option>)}
        </select>
      </PwaField>

      <PwaField label="اولویت" error={errors.priority}>
        <div className="pwa-priority-options">
          {priorityOptions.map((priority) => (
            <button
              key={priority.value}
              type="button"
              className={form.priority === priority.value ? 'active' : ''}
              onClick={() => onChange('priority', priority.value)}
            >
              {priority.label}
            </button>
          ))}
        </div>
      </PwaField>

      <PwaField label="مهلت انجام" error={errors.due_date}>
        <input
          type="date"
          value={form.due_date}
          onChange={(event) => onChange('due_date', event.target.value)}
        />
      </PwaField>

      <PwaField label="توضیح کوتاه" error={errors.description}>
        <textarea
          value={form.description}
          onChange={(event) => onChange('description', event.target.value)}
          placeholder="اگر نکته‌ای لازم است کوتاه بنویسید"
          rows={3}
        />
      </PwaField>
    </div>
  );
}

function PwaField({ label, error, required, children }) {
  return (
    <label className="pwa-field">
      <span>{label}{required && <b>*</b>}</span>
      {children}
      {error && <small>{Array.isArray(error) ? error[0] : error}</small>}
    </label>
  );
}
