import { FormGroup } from '@admin/components/ui/forms/form-group';
import { FormNumberInput } from '@admin/components/ui/forms/form-number-input';
import { FormSelect } from '@admin/components/ui/forms/form-select';
import { FormSwitch } from '@admin/components/ui/forms/form-switch';

export type SocialPlatformOption = {
    value: string;
    label: string;
};

type SocialLinkFormFieldsProps = {
    data: {
        platform: string;
        url: string;
        sort_order: number;
        status: boolean;
    };
    errors: Partial<Record<'platform' | 'url' | 'sort_order' | 'status', string>>;
    platforms: SocialPlatformOption[];
    setData: (key: string, value: unknown) => void;
};

export function SocialLinkFormFields({ data, errors, platforms, setData }: SocialLinkFormFieldsProps) {
    return (
        <>
            <FormSelect
                label="Network"
                value={data.platform}
                options={platforms}
                placeholder="Select a network"
                error={errors.platform}
                sortAlphabetically={false}
                onChange={(value) => setData('platform', value)}
            />

            <FormGroup
                label="Profile URL"
                error={errors.url}
                inputProps={{
                    type: 'url',
                    value: data.url,
                    placeholder: 'https://',
                    required: true,
                    onChange: (event) => setData('url', event.target.value),
                }}
            />

            <FormNumberInput
                label="Display order"
                helpText="Lower numbers appear first."
                min={0}
                value={data.sort_order}
                error={errors.sort_order}
                required
                onChange={(value) => setData('sort_order', value)}
            />

            <FormSwitch
                id="social-link-status"
                label="Published"
                checked={data.status}
                onChange={(event) => setData('status', event.target.checked)}
            />
        </>
    );
}