import * as React from 'react';
import Modal from 'react-modal';

import { AcceptAndCloseCTA } from '../AcceptAndCloseCTA';
import { useUsercentrics } from '../../contexts/UsercentricsContext';
import { cx } from '../../utils/cx';

function htmlDecode(content: string) {
  const txt = document.createElement('textarea');
  txt.innerHTML = content;
  return txt.value;
}

export type Props = {
  isOpen: boolean;
  onAcceptAll: VoidFunction;
  onCloseAndAcceptAll: VoidFunction;
  onSettings: VoidFunction;
};

export const InitialDialog = ({ isOpen, onAcceptAll, onCloseAndAcceptAll, onSettings }: Props): JSX.Element => {
  const { showCloseAndAcceptAllButton, settingsLabels } = useUsercentrics();
  return (
    <Modal
      isOpen={isOpen}
      contentLabel="Warning about GDPR"
      overlayClassName="uc-modal--overlay uc-modal"
      className="uc-grid-layout"
    >
      <div className="uc-grid uc-grid-cols-12 uc-gap-4">
        <div
          className={cx(
            'uc-bg-white uc-rounded-md uc-p-4 uc-col-start-1 uc-col-end-13',
            'md:uc-col-start-4 md:uc-col-end-10 md:uc-max-w-[320px]',
            'lg:uc-col-start-5  lg:uc-col-end-9 '
          )}
        >
          {showCloseAndAcceptAllButton && <AcceptAndCloseCTA onClick={onCloseAndAcceptAll} />}
          <h3 className="uc-mb-4 uc-text-22 uc-leading-24 uc-text-kilamanjaro uc-font-medium uc-font-secondary">
            {settingsLabels?.firstLayer.title}
          </h3>
          <div
            className="uc-mb-4 uc-whitespace-pre-wrap uc-text-16 uc-leading-24 uc-font-normal uc-text-kilamanjaro uc-font-primary flex flex-col gap-2"
            dangerouslySetInnerHTML={{ __html: htmlDecode(settingsLabels?.firstLayer.description.shortMobile!)! }}
          />

          <div className={'uc-grid uc-grid-cols-12 uc-grid-flow-col uc-gap-4'}>
            <button onClick={onAcceptAll} className={'uc-col-span-full uc-button uc-button--primary'}>
              {settingsLabels?.buttons.acceptAll}
            </button>
            <div className={'uc-flex uc-justify-center uc-col-span-full'}>
              <button onClick={onSettings} className="uc-button uc-px-0 uc-text-sand-dune">
                {settingsLabels?.buttons.showSecondLayer}
              </button>
            </div>
          </div>
        </div>
      </div>
    </Modal>
  );
};