import { Link } from 'react-router-dom';

import { usePopup } from 'components/layers';

import { Badge } from 'components/common';
import { MenuIconButton } from 'components/MenuIconButton';
import { StatusBadge } from 'components/StatusBadge';
import { AllianceCollectionMenu } from './AllianceCollectionMenu';
import { AllianceExportMenu } from './AllianceExportMenu';

import { formatNumber, formatDate } from 'utils';
import { To } from 'components/router/types';

export interface CollectionItemProps {
  isOwner: boolean;
  allianceId: string;
  data: {
    id: string;
    type: string;
    name: string;
    status: string;
    totalProfiles: number;
    dateCreated: string;
    createdBy: {
      me: boolean;
      name: string;
      company: string | null;
    } | null;
  };
  path: To;
}

export const CollectionItem = ({
  isOwner,
  allianceId,
  data,
  path,
}: CollectionItemProps) => {
  const createdByMe = Boolean(data.createdBy?.me);

  const menu = usePopup(AllianceCollectionMenu, {
    defaultProps: {
      allianceId: allianceId,
      collectionId: data.id,
    },
  });

  const exportMenu = usePopup(AllianceExportMenu, {
    defaultProps: {
      toFacebook: true,
      toKlaviyo: isOwner || createdByMe,
      toCSV: isOwner || createdByMe,
      allianceId: allianceId,
      collectionId: data.id,
    },
  });

  return (
    <div className="flex alignCenter hover paddingX4 paddingY3 fz14 pill">
      <div className="w100 truncate spacing2">
        <Link className="link c-black" to={path}>
          {data.name}
        </Link>
        {data.createdBy && (
          <Badge
            className="fz12"
            color="orange"
            title={`Added by ${data.createdBy.name}`}
          >
            {data.createdBy.company || data.createdBy.name}
          </Badge>
        )}
      </div>
      <div className="marginX4 nowrap">
        {data.status === 'finished' ? (
          <div className="medium" title="Unique profiles">
            {formatNumber(data.totalProfiles)}
          </div>
        ) : (
          <StatusBadge
            className="fz12 pill truncate"
            style={{ lineHeight: '24px' }}
            paddingX={3}
            status={data.status}
          />
        )}
      </div>
      <div className="w100 flex alignCenter justifyEnd spacing2">
        <div
          className="link onHover"
          onClick={(ev) => exportMenu.toggle(ev.currentTarget)}
        >
          Export
        </div>
        <div className="truncate c-gray">{formatDate(data.dateCreated)}</div>
        {data.type !== 'segment' && (
          <MenuIconButton
            className="onHover"
            onClick={(ev) => menu.toggle(ev.currentTarget)}
            disabled={!createdByMe && !isOwner}
          />
        )}
      </div>
    </div>
  );
};