import {
  Button,
  Column,
  Dialog,
  DialogTrigger,
  Heading,
  Icon,
  Popover,
  Row,
  StatusLight,
  Text,
} from '@umami/react-zen';
import { isSameDay } from 'date-fns';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { useMessages, useMobile, useSessionActivityQuery, useTimezone } from '@/components/hooks';
import { Eye, FileText } from '@/components/icons';
import { EventData } from '@/components/metrics/EventData';
import { Lightning } from '@/components/svg';

export function SessionActivity({
  websiteId,
  sessionId,
  startDate,
  endDate,
}: {
  websiteId: string;
  sessionId: string;
  startDate: Date;
  endDate: Date;
}) {
  const { t, labels } = useMessages();
  const { formatTimezoneDate } = useTimezone();
  const { data, isLoading, error } = useSessionActivityQuery(
    websiteId,
    sessionId,
    startDate,
    endDate,
  );
  const { isMobile } = useMobile();
  let lastDay = null;

  const renderLink = (label: string, hostname: string) => {
    return (
      <a
        href={`//${hostname}${label}`}
        style={{ fontWeight: 'bold' }}
        target="_blank"
        rel="noreferrer noopener"
      >
        {label}
      </a>
    );
  };

  return (
    <LoadingPanel data={data} isLoading={isLoading} error={error}>
      <Column gap>
        {data?.map(({ eventId, createdAt, urlPath, eventName, visitId, hostname, hasData }) => {
          const showHeader = !lastDay || !isSameDay(new Date(lastDay), new Date(createdAt));
          lastDay = createdAt;

          return (
            <Column key={eventId} gap>
              {showHeader && <Heading size="lg">{formatTimezoneDate(createdAt, 'PPPP')}</Heading>}
              <Row alignItems="center" gap="6" height="40px">
                <StatusLight color={`#${visitId?.substring(0, 6)}`}>
                  <Text wrap="nowrap">{formatTimezoneDate(createdAt, 'pp')}</Text>
                </StatusLight>
                <Row alignItems="center" gap="2">
                  <Icon>{eventName ? <Lightning /> : <Eye />}</Icon>
                  <Text wrap="nowrap">
                    {eventName ? t(labels.triggeredEvent) : t(labels.viewedPage)}
                  </Text>
                  <Text weight="bold" style={{ maxWidth: isMobile ? '400px' : null }} truncate>
                    {eventName || renderLink(urlPath, hostname)}
                  </Text>
                  {hasData > 0 && <PropertiesButton websiteId={websiteId} eventId={eventId} />}
                </Row>
              </Row>
            </Column>
          );
        })}
      </Column>
    </LoadingPanel>
  );
}

const PropertiesButton = props => {
  return (
    <DialogTrigger>
      <Button variant="quiet">
        <Row alignItems="center" gap>
          <Icon>
            <FileText />
          </Icon>
        </Row>
      </Button>
      <Popover placement="right">
        <Dialog>
          <EventData {...props} />
        </Dialog>
      </Popover>
    </DialogTrigger>
  );
};