import styles from './index.module.scss';
import cx from '../utils/classname.js';
import { getLanguageDisplayName } from './utils.js';
import LanguageOptions from './LanguageOptions.js';
import GlobeIcon from './assets/Globe.js';
import type { LanguageSwitcherProps } from './types.js';
import ContentFields from './ContentFields.js';
import StyleFields from './StyleFields.js';
import Button from '../Button/index.js';
import { useLanguageVariants } from '@hubspot/cms-components';
import { createTranslationsArrayAsObject } from './utils.js';
import Drawer, { useDrawer } from '../Drawer/index.js';
import { dummyTranslationsAsObject, dummyTranslations } from './_dummyData.js';
import Divider from '../Divider/index.js';
import type { CSSVariables } from '../utils/types.js';

const LanguageSwitcherComponent = ({
  useDummyData = false, // !todo - remove this in PROD (NOTE: storybook still needs the _dummyData, so add the _dummyData file to storybook dir and refactor usage there)
  menuBackgroundColor,
  menuBackgroundColorHover,
  color,
  colorHover,
  languageSwitcherSelectText = 'Select a language',
  className = '',
  style = {},
}: LanguageSwitcherProps) => {
  const translations = useDummyData ? dummyTranslations : useLanguageVariants(); // !todo remove this in PROD
  const translationsArrayAsObject = useDummyData
    ? dummyTranslationsAsObject
    : createTranslationsArrayAsObject(translations); // !todo remove this in PROD
  const activeTranslation = translations?.find(item => item.isActive);
  const currentPageLanguage = activeTranslation?.languageCode ?? '';
  const currentPageLanguageDisplayName = getLanguageDisplayName({
    currentPageLanguage,
    translationsArrayAsObject,
  });

  const { isOpen, toggle, close } = useDrawer();

  const isInEditor = false; // !todo - update this to use useEditorVariableChecks() hook (is_in_editor property) once it's working

  const colorCss = color?.rgba;
  const menuBackgroundColorCss = menuBackgroundColor?.rgba;

  const cssVariables = {
    ...(colorCss && { '--hscl-languageSwitcher-color': colorCss }),
    ...(menuBackgroundColorCss && {
      '--hscl-languageSwitcher-backgroundColor': menuBackgroundColorCss,
    }),
  };

  const dividerCssVariables: CSSVariables = {
    '--hscl-divider-borderColor': colorCss,
  };

  const combinedClasses = cx(styles.languageSwitcher, className);

  return (
    <div style={{ ...cssVariables, ...style }} className={combinedClasses}>
      <Button
        buttonType="button"
        aria-expanded={isOpen}
        onClick={toggle}
        className={styles.button}
        style={{ color: colorCss }}
      >
        <GlobeIcon />
        {currentPageLanguageDisplayName}
      </Button>
      {!isInEditor && (
        <Drawer
          open={isOpen}
          direction="right"
          onOverlayClick={close}
          aria-label="Language selector"
          className={styles.drawer}
          style={{
            ...cssVariables,
            backgroundColor: menuBackgroundColorCss,
          }}
        >
          <div className={styles.sidePanelHeader}>
            <span className={styles.sidePanelTitle}>
              {languageSwitcherSelectText}
            </span>
            <Button
              buttonType="button"
              onClick={close}
              aria-label="Close language selector"
              className={styles.sidePanelCloseButton}
            >
              ✕
            </Button>
          </div>

          <Divider spacing="0px" style={dividerCssVariables} />

          <div className={styles.sidePanelOptionsContainer}>
            <LanguageOptions
              {...{
                translations,
                menuBackgroundColor,
                menuBackgroundColorHover,
                color,
                colorHover,
              }}
            />
          </div>
        </Drawer>
      )}
    </div>
  );
};

type LanguageSwitcherComponentType = typeof LanguageSwitcherComponent & {
  ContentFields: typeof ContentFields;
  StyleFields: typeof StyleFields;
};

const LanguageSwitcher =
  LanguageSwitcherComponent as LanguageSwitcherComponentType;
LanguageSwitcher.ContentFields = ContentFields;
LanguageSwitcher.StyleFields = StyleFields;

export default LanguageSwitcher;
