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 { LanguageSwitcherIslandProps } from '../types.js';
import Button from '../../Button/index.js';
import { createTranslationsArrayAsObject } from '../utils.js';
import Drawer, { useDrawer } from '../../Drawer/index.js';
import Divider from '../../Divider/index.js';

const LanguageSwitcherIsland = ({
  translations,
  menuBackgroundColor,
  menuBackgroundColorHover,
  color,
  colorHover,
  languageSwitcherSelectText = 'Select a language',
  className = '',
  style = {},
}: LanguageSwitcherIslandProps) => {
  const translationsArrayAsObject = createTranslationsArrayAsObject(
    translations
  );
  const activeTranslation = translations?.find(item => item.isActive);
  const currentPageLanguage = activeTranslation?.languageCode ?? '';
  const currentPageLanguageDisplayName = getLanguageDisplayName({
    currentPageLanguage,
    translationsArrayAsObject,
  });

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

  const isInEditor = false;

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

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

  return (
    <div style={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={{ backgroundColor: menuBackgroundColorCss }}
        >
          <div
            className={styles.sidePanelHeader}
            style={{ backgroundColor: menuBackgroundColorCss }}
          >
            <span
              className={styles.sidePanelTitle}
              style={{ color: colorCss }}
            >
              {languageSwitcherSelectText}
            </span>
            <Button
              buttonType="button"
              onClick={close}
              aria-label="Close language selector"
              className={styles.sidePanelCloseButton}
              style={{ color: colorCss }}
            >
              ✕
            </Button>
          </div>

          <Divider spacing="0px" color={color} />

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

export default LanguageSwitcherIsland;
