import {
  formatSlotTime,
  HOURS_PER_DAY,
} from '../../data/availabilityUtils';

export function MeetingProposalCard({
  mode,
  weekNumber,
  startDay,
  startHour,
  endDay,
  endHour,
  subject,
  onSubjectChange,
  onStartChange,
  onEndChange,
  onSave,
  onDiscard,
  onDelete,
  style,
}) {
  const isEdit = mode === 'edit';

  const startOptions = [];
  for (let d = 0; d < 7; d += 1) {
    for (let h = 0; h < HOURS_PER_DAY; h += 1) {
      startOptions.push({ dayIndex: d, hour: h, label: formatSlotTime(d, h, weekNumber) });
    }
  }

  const endOptions = [...startOptions];
  endOptions.push({
    dayIndex: endDay,
    hour: endHour,
    label: formatSlotTime(endDay, endHour, weekNumber),
  });

  return (
    <div className="proposal-card" style={style} onMouseDown={(e) => e.stopPropagation()}>
      <div className="proposal-card-main">
        <div className="proposal-card-fields">
          <div className="proposal-time-row">
            <select
              className="proposal-field"
              value={`${startDay}-${startHour}`}
              onChange={(e) => {
                const [d, h] = e.target.value.split('-').map(Number);
                onStartChange(d, h);
              }}
            >
              {startOptions.map((opt) => (
                <option key={`s-${opt.dayIndex}-${opt.hour}`} value={`${opt.dayIndex}-${opt.hour}`}>
                  {opt.label}
                </option>
              ))}
            </select>
            <select
              className="proposal-field"
              value={`${endDay}-${endHour}`}
              onChange={(e) => {
                const [d, h] = e.target.value.split('-').map(Number);
                onEndChange(d, h);
              }}
            >
              {endOptions.map((opt) => (
                <option key={`e-${opt.dayIndex}-${opt.hour}`} value={`${opt.dayIndex}-${opt.hour}`}>
                  {opt.label}
                </option>
              ))}
            </select>
          </div>
          <textarea
            className="proposal-field proposal-field--subject"
            value={subject}
            placeholder="Meeting purpose"
            rows={3}
            onChange={(e) => onSubjectChange(e.target.value)}
          />
        </div>
      </div>
      <div className="proposal-card-actions">
        <button type="button" className="proposal-action proposal-action--save" onClick={onSave}>
          Save
        </button>
        <button
          type="button"
          className="proposal-action proposal-action--exit"
          onClick={isEdit ? onDelete : onDiscard}
        >
          {isEdit ? 'Delete' : 'Discard'}
        </button>
      </div>
    </div>
  );
}
