import { Fieldset, Group, Stack } from '@mantine/core';
import { __ } from '@wordpress/i18n';
import { OptionSwitch, useOptionsContext } from '../components/Options';

export default function ThemeSettings() {
  const { options } = useOptionsContext();

  return (
    <Stack py={16}>
      <Fieldset legend={__('Banner', 'wp-bannerize')}>
        <Stack>
          <OptionSwitch
            label={__('Enable Custom page', 'wp-bannerize')}
            description={__(
              'Enable the custom page for the single banners',
              'wp-bannerize',
            )}
            path="theme.banner.custom_template.enabled"
          />
          <Fieldset legend={__('Additional elements', 'wp-bannerize')}>
            <Group>
              <OptionSwitch
                label={__('Header', 'wp-bannerize')}
                description={__(
                  'Display header on the custom page',
                  'wp-bannerize',
                )}
                path="theme.banner.custom_template.header"
                disabled={!options.theme.banner.custom_template.enabled}
              />
              <OptionSwitch
                label={__('Footer', 'wp-bannerize')}
                description={__(
                  'Display footer on the custom page',
                  'wp-bannerize',
                )}
                path="theme.banner.custom_template.footer"
                disabled={!options.theme.banner.custom_template.enabled}
              />
              <OptionSwitch
                label={__('Sidebar', 'wp-bannerize')}
                description={__(
                  'Display sidebar on the custom page',
                  'wp-bannerize',
                )}
                path="theme.banner.custom_template.sidebar"
                disabled={!options.theme.banner.custom_template.enabled}
              />
            </Group>
          </Fieldset>
        </Stack>
      </Fieldset>
      <Fieldset legend={__('Campaigns', 'wp-bannerize')}>
        <Stack>
          <OptionSwitch
            label={__('Enable custom Campaigns page', 'wp-bannerize')}
            description={__(
              'Enable the custom page for the campaigns',
              'wp-bannerize',
            )}
            path="theme.campaigns.custom_template.enabled"
          />
          <Fieldset legend={__('Additional elements', 'wp-bannerize')}>
            <Group>
              <OptionSwitch
                label={__('Header', 'wp-bannerize')}
                description={__(
                  'Display header on the custom page',
                  'wp-bannerize',
                )}
                path="theme.campaigns.custom_template.header"
                disabled={!options.theme.campaigns.custom_template.enabled}
              />
              <OptionSwitch
                label={__('Footer', 'wp-bannerize')}
                description={__(
                  'Display footer on the custom page',
                  'wp-bannerize',
                )}
                path="theme.campaigns.custom_template.footer"
                disabled={!options.theme.campaigns.custom_template.enabled}
              />
              <OptionSwitch
                label={__('Sidebar', 'wp-bannerize')}
                description={__(
                  'Display sidebar on the custom page',
                  'wp-bannerize',
                )}
                path="theme.campaigns.custom_template.sidebar"
                disabled={!options.theme.campaigns.custom_template.enabled}
              />
            </Group>
          </Fieldset>
        </Stack>
      </Fieldset>
    </Stack>
  );
}