import {useContext} from 'react';
import {
AdConfig,
SiteConfigContext,
} from '../../core/settings/site-config-context';
import {Form} from '../../ui/forms/form';
import {useForm} from 'react-hook-form';
import {FormTextField} from '../../ui/forms/input-field/text-field/text-field';
import {Trans} from '../../i18n/trans';
import {Button} from '../../ui/buttons/button';
import {FormSwitch} from '../../ui/forms/toggle/switch';
import {useAdminSettings} from '../settings/requests/use-admin-settings';
import {ProgressCircle} from '../../ui/progress/progress-circle';
import {Settings} from '../../core/settings/settings';
import {
AdminSettingsWithFiles,
useUpdateAdminSettings,
} from '../settings/requests/update-admin-settings';
import {DialogTrigger} from '../../ui/overlays/dialog/dialog-trigger';
import {ImageZoomDialog} from '../../ui/overlays/dialog/image-zoom-dialog';
import {StaticPageTitle} from '../../seo/static-page-title';
export function AdsPage() {
const query = useAdminSettings();
return (
<div className="container mx-auto p-12 md:p-24">
<StaticPageTitle>
<Trans message="Ads" />
</StaticPageTitle>
<h1 className="mb-20 text-2xl font-light md:mb-40 md:text-3xl">
<Trans message="Predefined Ad slots" />
</h1>
{query.isLoading ? (
<ProgressCircle isIndeterminate />
) : (
<AdsForm defaultValues={query.data?.client.ads || {}} />
)}
</div>
);
}
interface AdsFormProps {
defaultValues: Settings['ads'];
}
function AdsForm({defaultValues}: AdsFormProps) {
const {
admin: {ads},
} = useContext(SiteConfigContext);
const form = useForm<AdminSettingsWithFiles>({
defaultValues: {client: {ads: defaultValues}},
});
const updateSettings = useUpdateAdminSettings(form);
return (
<Form
form={form}
onSubmit={value => {
updateSettings.mutate(value);
}}
>
{ads.map(ad => {
return <AdSection key={ad.slot} adConfig={ad} />;
})}
<FormSwitch
name="client.ads.disable"
className="mb-30"
description={
<Trans message="Disable all add related functionality across the site." />
}
>
<Trans message="Disable ads" />
</FormSwitch>
<Button
type="submit"
variant="flat"
color="primary"
disabled={updateSettings.isPending}
>
<Trans message="Save" />
</Button>
</Form>
);
}
interface AdSectionProps {
adConfig: AdConfig;
}
function AdSection({adConfig}: AdSectionProps) {
return (
<div className="flex items-center gap-24">
<FormTextField
className="mb-30 flex-auto"
name={`client.${adConfig.slot}`}
inputElementType="textarea"
rows={8}
label={<Trans {...adConfig.description} />}
/>
<DialogTrigger type="modal">
<button
type="button"
className="cursor-zoom-in overflow-hidden rounded outline-none transition hover:scale-105 focus-visible:ring max-md:hidden"
>
<img
src={adConfig.image}
className="h-[186px] w-auto border"
alt="Ad slot example"
/>
</button>
<ImageZoomDialog image={adConfig.image} />
</DialogTrigger>
</div>
);
}