import { useModal } from 'components/layers';
import { usePopup } from 'components/layers';

import { Badge } from 'components/common';
import { MenuIconButton } from 'components/MenuIconButton';
import {
  SharedWithModal,
  ShareAudienceModal,
  CreateLookalikeModal,
} from './modals';
import { AudienceItemMenu } from './AudienceItemMenu';

import { maybePluralize } from 'utils/maybePluralize';
import { formatDate, formatNumber } from 'utils/index';

function checkForSharingErrors(accounts: { status: number }[]) {
  return accounts.some((acc) => acc.status >= 909);
}

export type Audience = {
  id: string;
  parentId: string | null;
  name: string;
  description: string;
  size: number;
  ratio: {
    name: string;
  } | null;
  countries: {
    id: string;
    name: string;
  }[];
  sharedWith: { status: number }[];
  dateCreated: string;
};

interface AudienceItemProps {
  data: Audience;
  style?: React.CSSProperties;
  expanded?: boolean;
  toggleTree?: () => void;
}

export const AudienceItem = ({
  data,
  style,
  expanded,
  toggleTree,
}: AudienceItemProps) => {
  const isShared = data.sharedWith.length > 0;

  const sharedWithModal = useModal(SharedWithModal, {
    defaultProps: { audienceId: data.id, audienceName: data.name },
  });
  const shareAudienceModal = useModal(ShareAudienceModal, {
    defaultProps: { audienceId: data.id },
  });
  const createLookalikeModal = useModal(CreateLookalikeModal, {
    defaultProps: { audienceId: data.id },
  });
  const audienceItemMenu = usePopup(AudienceItemMenu, {
    defaultProps: { audienceId: data.id, parentId: data.parentId },
  });

  const hasChildren = toggleTree !== undefined;
  return (
    <div
      className="flex justifyBetween hover pill paddingX4 paddingY3 fz14"
      style={style}
    >
      <div className="w100 flex alignCenter spacing2">
        <div
          onClick={toggleTree}
          className={hasChildren ? 'circle hover1 cup' : ''}
          style={{
            width: data.parentId ? 0 : 20,
            height: 20,
            lineHeight: '16px',
            textAlign: 'center',
            verticalAlign: 'middle',
            userSelect: 'none',
            fontSize: 20,
          }}
        >
          {hasChildren ? (expanded ? '−' : '+') : ''}
        </div>

        <span className="truncate" title={data.description}>
          {data.name}
        </span>
        {data.parentId !== null && (
          <div className="flex spacing2">
            {data.ratio && (
              <Badge
                className="fz12"
                color="blue"
                title="Lookalike ratio"
                uppercase
              >
                {data.ratio.name} lookalike
              </Badge>
            )}
            {data.countries?.map((country) => {
              return (
                <Badge
                  className="fz12"
                  color="gray"
                  title={country.name}
                  key={country.id}
                >
                  {country.id}
                </Badge>
              );
            })}
          </div>
        )}
      </div>
      <div className="marginX4 tac nowrap">
        <div className="medium" title="Audience size">
          {formatNumber(data.size)}
        </div>
      </div>
      <div className="w100 flex alignCenter justifyEnd spacing4">
        {data.parentId === null && (
          <div
            className="link onHover"
            onClick={() => createLookalikeModal.show()}
          >
            Create Lookalike
          </div>
        )}
        {isShared ? (
          <div>
            Shared with{' '}
            <span
              className="link"
              style={{
                ...(checkForSharingErrors(data?.sharedWith) && {
                  color: 'var(--colorRed)',
                }),
              }}
              onClick={() => sharedWithModal.show()}
            >
              {maybePluralize(data.sharedWith.length, 'account')}
            </span>
          </div>
        ) : (
          <div
            className="link onHover"
            onClick={() => shareAudienceModal.show()}
          >
            Share
          </div>
        )}
        <div className="truncate c-gray">{formatDate(data.dateCreated)}</div>
        <MenuIconButton
          className="onHover"
          onClick={(ev) => audienceItemMenu.toggle(ev.currentTarget)}
        />
      </div>
    </div>
  );
};