import React from 'react';
import { isMobile } from 'react-device-detect';

import { SupportedProviders } from '../constants';
import { Maybe } from '../types';
import cls from '../utils/tailwind';
import useTheme from '../utils/useTheme';

const styles = cls({
  container: ``,
  innerContainer: `
    tw-relative
    tw-overflow-hidden
    ${isMobile ? 'tw-h-screen' : ''}`,
  closeButton: `
    tw-absolute
    tw-top-5
    ${isMobile ? 'tw-right-2' : 'tw-right-5'}
    hover:tw-opacity-80
    tw-rounded
    tw-z-20`,
  backButton: `
    tw-absolute
    tw-top-5
    ${isMobile ? 'tw-left-2' : 'tw-left-5'}
    hover:tw-opacity-80
    tw-rounded
    tw-z-20`,
  svg: `
    tw-h-5
    tw-w-5
    tw-fill-current`,
  layout: `
    tw-flex
    tw-flex-row
    tw-border-solid
    tw-divide-x
    tw-h-full`,
  trayContainer: `
    tw-flex
    tw-flex-col
    tw-p-4
    tw-h-full
    ${isMobile ? '' : 'tw-basis-3/12'}`,
  contentContainer: `
    tw-flex
    tw-flex-col
    tw-py-4
    tw-px-6
    tw-h-full
    ${isMobile ? 'tw-items-center' : ''}
    ${isMobile ? '' : 'tw-basis-9/12'}`,
});

interface Props {
  selectedProvider: Maybe<SupportedProviders>;
  onClose: () => void;
  onBack: () => void;
  tray: React.ReactElement;
  content: Maybe<React.ReactElement>;
}
export default function ModalContainer({
  onBack,
  onClose,
  selectedProvider,
  tray,
  content,
}: Props) {
  const theme = useTheme();
  let contentToRender = null;

  if (isMobile) {
    if (selectedProvider) {
      contentToRender = <div className={styles.trayContainer}>{content}</div>;
    } else {
      contentToRender = <div className={styles.contentContainer}>{tray}</div>;
    }
  } else {
    contentToRender = (
      <div className={styles.layout}>
        <div className={styles.trayContainer}>{tray}</div>
        <div
          className={styles.contentContainer}
          style={{ borderColor: theme.muted }}
        >
          {content}
        </div>
      </div>
    );
  }

  return (
    <div
      className={`react-celo ${styles.container}`}
      style={{ background: theme.background }}
    >
      <div
        className={`react-celo-connect-container ${styles.innerContainer}`}
        style={{ color: theme.textSecondary }}
      >
        <button onClick={onClose} className={styles.closeButton}>
          {/* https://fontawesome.com/icons/xmark?s=solid */}
          <svg
            className={styles.svg}
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 320 512"
          >
            <path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z" />
          </svg>{' '}
        </button>
        {isMobile && selectedProvider && (
          <button onClick={onBack} className={styles.backButton}>
            {/* https://fontawesome.com/icons/arrow-left-long?s=solid */}
            <svg
              className={styles.svg}
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 512 512"
            >
              <path d="M9.375 233.4l128-128c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L109.3 224H480c17.69 0 32 14.31 32 32s-14.31 32-32 32H109.3l73.38 73.38c12.5 12.5 12.5 32.75 0 45.25c-12.49 12.49-32.74 12.51-45.25 0l-128-128C-3.125 266.1-3.125 245.9 9.375 233.4z" />
            </svg>{' '}
          </button>
        )}
        {contentToRender}
      </div>
    </div>
  );
}