import React, { useState } from 'react';
import clsx from 'clsx';
import { BaseProps } from '@digigov/react-core/Base';
import useFontSize, {
  FontSizeOptions,
} from '@digigov/ui/app/hooks/useFontSize';
import useHighlightLinks, {
  HighlightLinksOptions,
} from '@digigov/ui/app/hooks/useHighlightLinks';
import useLetterSpacing, {
  LetterSpacingOptions,
} from '@digigov/ui/app/hooks/useLetterSpacing';
import useLineHeight, {
  LineHeightOptions,
} from '@digigov/ui/app/hooks/useLineHeight';
import useTheme, { ThemeSelectOptions } from '@digigov/ui/app/hooks/useTheme';
import Button from '@digigov/ui/form/Button';
import FieldContainer, {
  Fieldset,
  FieldsetLegend,
} from '@digigov/ui/form/FieldContainer';
import Form from '@digigov/ui/form/Form';
import { RadioContainer, RadioItem } from '@digigov/ui/form/RadioContainer';
import SectionBreak from '@digigov/ui/layouts/SectionBreak';

import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';

export interface ThemeOptionsProps extends BaseProps<'form'> {
  colorsOption?: boolean;
  fontSizeOption?: boolean;
  lineHeightOption?: boolean;
  letterSpacingOption?: boolean;
  highlightLinksOption?: boolean;

  colorsOptionTitleSize?: TitleSize;
  fontSizeOptionTitleSize?: TitleSize;
  lineHeightOptionTitleSize?: TitleSize;
  letterSpacingOptionTitleSize?: TitleSize;
  highlightLinksOptionTitleSize?: TitleSize;
}

type TitleSize = 'xl' | 'lg' | 'md' | 'sm' | 'hidden';

const FieldsetLegendTitle = ({ titleSize, titleValue }) => {
  return (
    <>
      {titleSize === 'hidden' ? (
        <FieldsetLegend>
          <VisuallyHidden>{titleValue}</VisuallyHidden>
        </FieldsetLegend>
      ) : (
        <FieldsetLegend size={titleSize}>{titleValue}</FieldsetLegend>
      )}
    </>
  );
};

// export const ThemeOptions = () => {
export const ThemeOptions = React.forwardRef<
  HTMLFormElement,
  ThemeOptionsProps
>(function ThemeOptions(
  {
    colorsOption = true,
    fontSizeOption = true,
    lineHeightOption = true,
    letterSpacingOption = true,
    highlightLinksOption = true,
    colorsOptionTitleSize = 'sm',
    className,
    ...props
  },
  ref
) {
  const [theme, changeTheme] = useTheme();
  const [selectedTheme, setSelectedTheme] = useState<ThemeSelectOptions>(
    theme || 'auto'
  );
  const [fontSize, changeFontSize] = useFontSize();
  const [selectedFontSize, setSelectedFontSize] = useState<FontSizeOptions>(
    fontSize || 'default'
  );
  const [lineHeight, changeLineHeight] = useLineHeight();
  const [selectedLineHeight, setSelectedLineHeight] =
    useState<LineHeightOptions>(lineHeight || 'default');
  const [letterSpacing, changeLetterSpacing] = useLetterSpacing();
  const [selectedLetterSpacing, setSelectedLetterSpacing] =
    useState<LetterSpacingOptions>(letterSpacing || 'default');

  const [highlightLinks, changeHighlightLinks] = useHighlightLinks();
  const [selectedHighlightLinks, setSelectedHighlightLinks] =
    useState<HighlightLinksOptions>(highlightLinks || 'default');

  function handleOptions() {
    changeTheme(selectedTheme);
    changeFontSize(selectedFontSize);
    changeLineHeight(selectedLineHeight);
    changeLetterSpacing(selectedLetterSpacing);
    changeHighlightLinks(selectedHighlightLinks);
  }
  function resetOptions() {
    setSelectedTheme('light');
    setSelectedFontSize('default');
    setSelectedLineHeight('default');
    setSelectedLetterSpacing('default');
    setSelectedHighlightLinks('default');
  }
  function optionsHasChanged() {
    if (
      theme != selectedTheme ||
      fontSize != selectedFontSize ||
      lineHeight != selectedLineHeight ||
      letterSpacing != selectedLetterSpacing ||
      highlightLinks != selectedHighlightLinks
    ) {
      return true;
    } else {
      return false;
    }
  }

  return (
    <Form {...props} ref={ref} className={clsx(className)}>
      {colorsOption && (
        <FieldContainer marginBottom={4}>
          <Fieldset>
            <FieldsetLegendTitle
              titleSize={colorsOptionTitleSize}
              titleValue="Επιλογή θέματος"
            />
            <RadioContainer>
              <RadioItem
                name="theme_mode"
                value="light"
                onChange={() => setSelectedTheme('light')}
                checked={selectedTheme === 'light'}
              >
                Φωτεινό θέμα
              </RadioItem>
              <RadioItem
                name="theme_mode"
                value="dark"
                onChange={() => setSelectedTheme('dark')}
                checked={selectedTheme === 'dark'}
              >
                Σκούρο θέμα
              </RadioItem>
              <RadioItem
                name="theme_mode"
                value="auto"
                onChange={() => setSelectedTheme('auto')}
                checked={selectedTheme === 'auto'}
              >
                Επιλογή συστήματος
              </RadioItem>
            </RadioContainer>
          </Fieldset>
        </FieldContainer>
      )}
      {fontSizeOption && (
        <FieldContainer marginBottom={4}>
          <Fieldset>
            <FieldsetLegend size="sm">Μέγεθος γραμμάτων</FieldsetLegend>
            <RadioContainer layout="horizontal">
              <RadioItem
                name="font-size"
                value="no"
                onChange={() => setSelectedFontSize('default')}
                checked={selectedFontSize === 'default'}
              >
                Κανονικό (προεπιλογή)
              </RadioItem>
              <RadioItem
                name="font-size"
                value="yes"
                onChange={() => {
                  setSelectedFontSize('large');
                }}
                checked={selectedFontSize === 'large'}
              >
                Μεγαλύτερο
              </RadioItem>
            </RadioContainer>
          </Fieldset>
        </FieldContainer>
      )}
      {lineHeightOption && (
        <FieldContainer marginBottom={4}>
          <Fieldset>
            <FieldsetLegend size="sm">Ύψος γραμμής κειμένων</FieldsetLegend>
            <RadioContainer layout="horizontal">
              <RadioItem
                name="line-height"
                value="no"
                onChange={() => setSelectedLineHeight('default')}
                checked={selectedLineHeight === 'default'}
              >
                Κανονικό (προεπιλογή)
              </RadioItem>
              <RadioItem
                name="line-height"
                value="yes"
                onChange={() => {
                  setSelectedLineHeight('large');
                }}
                checked={selectedLineHeight === 'large'}
              >
                Μεγαλύτερο
              </RadioItem>
            </RadioContainer>
          </Fieldset>
        </FieldContainer>
      )}
      {letterSpacingOption && (
        <FieldContainer marginBottom={4}>
          <Fieldset>
            <FieldsetLegend size="sm">Απόσταση γραμμάτων</FieldsetLegend>
            <RadioContainer layout="horizontal">
              <RadioItem
                name="letter-spacing"
                value="no"
                onChange={() => setSelectedLetterSpacing('default')}
                checked={selectedLetterSpacing === 'default'}
              >
                Κανονική (προεπιλογή)
              </RadioItem>
              <RadioItem
                name="letter-spacing"
                value="yes"
                onChange={() => {
                  setSelectedLetterSpacing('extra');
                }}
                checked={selectedLetterSpacing === 'extra'}
              >
                Μεγαλύτερη
              </RadioItem>
            </RadioContainer>
          </Fieldset>
        </FieldContainer>
      )}
      {highlightLinksOption && (
        <FieldContainer marginBottom={4}>
          <Fieldset>
            <FieldsetLegend size="sm">Έντονη εμφάνιση συνδέσμων</FieldsetLegend>
            <RadioContainer layout="horizontal">
              <RadioItem
                name="highlight-links"
                value="no"
                onChange={() => setSelectedHighlightLinks('default')}
                checked={selectedHighlightLinks === 'default'}
              >
                Όχι (προεπιλογή)
              </RadioItem>
              <RadioItem
                name="highlight-links"
                value="yes"
                onChange={() => {
                  setSelectedHighlightLinks('highlight');
                }}
                checked={selectedHighlightLinks === 'highlight'}
              >
                Ναι
              </RadioItem>
            </RadioContainer>
          </Fieldset>
        </FieldContainer>
      )}
      <Button onClick={resetOptions} variant="link">
        Επαναφορά όλων των επιλογών
      </Button>
      <SectionBreak visible={false} />
      <Button onClick={handleOptions} disabled={!optionsHasChanged()}>
        Εφαρμογή
      </Button>
    </Form>
  );
});
export default ThemeOptions;