import { Button, Field } from "./ui";
import type { Meeting } from "../types";

export const days = [
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
    "Sunday",
];

export default function MeetingEditor({
    value,
    onChange,
    required = true,
}: {
    value: Meeting[];
    onChange: (value: Meeting[]) => void;
    required?: boolean;
}) {
    const change = (index: number, patch: Partial<Meeting>) =>
        onChange(
            value.map((row, i) => (i === index ? { ...row, ...patch } : row)),
        );
    return (
        <div className="form-stack">
            {value.map((row, i) => (
                <div className="meeting-row" key={i}>
                    <Field label={`Meeting ${i + 1} day`}>
                        <select
                            value={row.day}
                            onChange={(e) =>
                                change(i, { day: Number(e.target.value) })
                            }
                        >
                            {days.map((day, n) => (
                                <option key={day} value={n + 1}>
                                    {day}
                                </option>
                            ))}
                        </select>
                    </Field>
                    <Field label="Starts">
                        <input
                            type="time"
                            required={required}
                            value={row.start}
                            onChange={(e) =>
                                change(i, { start: e.target.value })
                            }
                        />
                    </Field>
                    <Field label="Ends">
                        <input
                            type="time"
                            required={required}
                            value={row.end}
                            onChange={(e) => change(i, { end: e.target.value })}
                        />
                    </Field>
                    {value.length > 1 && (
                        <Button
                            type="button"
                            variant="ghost"
                            aria-label={`Remove meeting ${i + 1}`}
                            onClick={() =>
                                onChange(value.filter((_, n) => n !== i))
                            }
                        >
                            Remove
                        </Button>
                    )}
                </div>
            ))}
            {value.length < 14 && (
                <div>
                    <Button
                        type="button"
                        variant="secondary"
                        onClick={() =>
                            onChange([...value, { day: 1, start: "", end: "" }])
                        }
                    >
                        Add weekly meeting
                    </Button>
                </div>
            )}
        </div>
    );
}