/* Business name, kind, currency and opening hours: on the setup page and in Settings. */
import { Choice, Field, Input, Select } from './ui';

export type BusinessForm = { name: string; type: string; currency: string; opens_at: string; closes_at: string };
/** Any Inertia form that has these fields (the Settings form has more). */
type FormLike = { data: BusinessForm; errors: Partial<Record<string, string>>; setData(key: keyof BusinessForm, value: string): void };

export default function BusinessFields({ form, types, currencies }: { form: FormLike; types: Record<string, string>; currencies: Record<string, string> }) {
    const d = form.data;
    const err = form.errors;
    return (
        <div className="space-y-5">
            <Field label="Business name" htmlFor="b-name" error={err.name} required>
                <Input id="b-name" value={d.name} onChange={(e) => form.setData('name', e.target.value)} invalid={!!err.name} placeholder="e.g. Chisomo's Grocery" />
            </Field>
            <Field label="What kind of business?" error={err.type} required>
                <div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
                    {Object.entries(types).map(([k, label]) => (
                        <Choice key={k} name="b-type" value={k} checked={d.type === k} onChange={() => form.setData('type', k)} className="py-3">{label}</Choice>
                    ))}
                </div>
            </Field>
            <Field label="Currency" htmlFor="b-currency" error={err.currency} required>
                <Select id="b-currency" value={d.currency} onChange={(e) => form.setData('currency', e.target.value)}>
                    {Object.entries(currencies).map(([k, label]) => <option key={k} value={k}>{label}</option>)}
                </Select>
            </Field>
            <Field label={<>Opening hours <span className="font-normal text-muted">(optional)</span></>} error={err.opens_at || err.closes_at}>
                <div className="flex items-center gap-2">
                    <Input type="time" aria-label="Opens at" value={d.opens_at} onChange={(e) => form.setData('opens_at', e.target.value)} className="flex-1" />
                    <span className="text-muted">to</span>
                    <Input type="time" aria-label="Closes at" value={d.closes_at} onChange={(e) => form.setData('closes_at', e.target.value)} className="flex-1" />
                </div>
            </Field>
        </div>
    );
}