import { Group, Skeleton, Stack } from '@mantine/core';
import { useEffect, useState } from 'react';
import classes from './EmailPreviewComponents.module.css';

export const When = ({ truthy, children, fallback = null }: any) => (truthy ? children : null);

export function ContentSkeleton() {
  return (
    <Stack gap={40} py={40} px={30} h="100%">
      <Group align="center">
        <Skeleton height={40} width={80} radius="sm" />
      </Group>
      <Stack gap={12}>
        <Group gap={16}>
          <Skeleton height={14} width="70%" radius="sm" />
          <Skeleton height={14} width="30%" radius="sm" />
        </Group>
        <Group gap={16}>
          <Skeleton height={14} width="30%" radius="sm" />
          <Skeleton height={14} width="70%" radius="sm" />
        </Group>
        <Group gap={16}>
          <Skeleton height={14} width="72%" radius="sm" />
        </Group>
      </Stack>

      <Group gap={16} mt="auto">
        <Skeleton height={14} width="30%" radius="sm" />
      </Group>
    </Stack>
  );
}

export function HeaderSkeleton() {
  return (
    <>
      <Skeleton height={40} width={40} circle />
      <Stack gap={3}>
        <Skeleton height={14} width={160} radius="xs" />
        <Skeleton height={14} width={80} />
      </Stack>
    </>
  );
}

export const PreviewUserIcon = (props: any) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="40"
    height="40"
    fill="none"
    viewBox="0 0 40 40"
    {...props}
  >
    <path
      fill="#3D3D4D"
      d="M40 20c0 11.046-8.954 20-20 20S0 31.046 0 20 8.954 0 20 0s20 8.954 20 20z"
    />
    <path
      fill="#525266"
      d="M7 35.2v-4.228c0-1.018.257-1.91.77-2.673a5.002 5.002 0 012.008-1.744c1.815-.842 3.588-1.474 5.32-1.895a22.072 22.072 0 015.235-.632c1.76 0 3.5.215 5.223.646 1.722.43 3.49 1.058 5.305 1.881a4.96 4.96 0 012.035 1.744c.514.764.77 1.655.77 2.673v3.63A19.93 19.93 0 0120 40a19.922 19.922 0 01-13-4.8zM15.764 19.958c1.213 1.213 2.736 1.82 4.57 1.82 1.833 0 3.356-.607 4.569-1.82s1.82-2.736 1.82-4.57c0-1.832-.607-3.356-1.82-4.569S22.167 9 20.333 9c-1.833 0-3.356.606-4.57 1.82-1.212 1.212-1.819 2.736-1.819 4.569 0 1.833.607 3.356 1.82 4.57z"
    />
  </svg>
);

export function EmailPreviewComponent({ preview }: { preview: any }) {
  const [localPreview, setLocalPreview] = useState(preview);

  const [loading, setLoading] = useState(false);
  useEffect(() => {
    if (preview) {
      setLocalPreview(preview);
    }
  }, [preview]);

  const content = localPreview?.body;
  const subject = localPreview?.subject;

  return (
    <div className={classes.browser}>
      <div className={classes.bar}>
        <Group gap={6}>
          <div className={classes.barAction} />
          <div className={classes.barAction} />
          <div className={classes.barAction} />
        </Group>
      </div>
      <div className={classes.contentContainer}>
        <div className={classes.header}>
          <Group gap={16}>
            <When truthy={loading}>
              <HeaderSkeleton />
            </When>
            <When truthy={!loading}>
              <PreviewUserIcon />
              <div>
                <>
                  <div data-test-id="preview-subject" className={classes.subject}>
                    {subject}
                  </div>
                </>
              </div>
            </When>
          </Group>
        </div>
        <div className={classes.overlayContainer}>
          <div className={classes.content}>
            <When truthy={loading}>
              <ContentSkeleton />
            </When>
            <When truthy={!loading}>
              <iframe className={classes.frame} srcDoc={content} title="" />
            </When>
          </div>
        </div>
      </div>
    </div>
  );
}
