import { useRef } from 'react';

import { useModal } from 'components/layers';

import { Box, Button, Badge } from 'components/common';
import { Header } from 'components/Header';
import { StatusBadge } from 'components/StatusBadge';
import {
  AddCollectionsModal,
  InviteMemberModal,
} from 'components/alliance/modals';

import { formatDate, formatNumber } from 'utils';

const wasUpdated = false;

export const AlliancePageHeader = ({
  data,
}: {
  data: {
    id: string;
    name: string;
    status: string;
    totalProfiles: number;
    lastUpdated: string;
    createdBy: {
      me: boolean;
    };
  };
}) => {
  const isOwner = data.createdBy.me;
  const lastUpdated = useRef(data.lastUpdated);

  const inviteMemberModal = useModal(InviteMemberModal, {
    defaultProps: { allianceId: data.id },
  });
  const addCollectionsModal = useModal(AddCollectionsModal, {
    defaultProps: { allianceId: data.id },
  });

  const totalProfiles = data.totalProfiles
    ? `${formatNumber(data.totalProfiles)} profiles`
    : null;

  return (
    <Header
      className="sticky"
      style={{ top: 0, zIndex: 1 }}
      left={
        <Box spacing={2}>
          <span className="c-black">{data.name}</span>
          {wasUpdated && lastUpdated.current !== data.lastUpdated && (
            <Badge
              className="fz12 medium"
              color="gray"
              title={`Last updated ${formatDate(data.lastUpdated)}`}
            >
              Refresh to update
            </Badge>
          )}
        </Box>
      }
      title={
        data.status === 'finished' ? (
          totalProfiles
        ) : (
          <StatusBadge
            className="rounded2"
            paddingX={2}
            status={data.status}
            title="Alliance status"
          />
        )
      }
      right={
        <Box display="flex" justify="end" spacing={2}>
          {isOwner && (
            <Button onClick={() => inviteMemberModal.show()}>Add member</Button>
          )}
          <Button onClick={() => addCollectionsModal.show()}>
            Add profiles
          </Button>
        </Box>
      }
    />
  );
};