import { gql } from '@apollo/client';
import { useModal } from 'components/layers';
import { ResolveAdAccountAccessModal } from './ResolveAdAccountAccessModal';
import { RevokeAudienceAccessModal } from './RevokeAudienceAccessModal';

import { Badge } from 'components/common';

export const sharedAudience = gql`
  fragment sharedAudience on AudienceExtended {
    id
    sharedWith {
      id
      name
      status
      sharedStatus
      adAccountId: adaccountId
    }
  }
`;

type AdAccount = {
  id: string;
  name: string;
  status: number;
  sharedStatus: string;
  adAccountId: string;
};

type AdAccountProps = {
  adAccountId: string;
  adAccountName: string;
};

interface SharedWithItemProps {
  data: AdAccount;
  onRevoke: (props: AdAccountProps) => void;
  onResolve: (props: AdAccountProps) => void;
}

const SharedWithItem = ({ data, onRevoke, onResolve }: SharedWithItemProps) => {
  const modalProps: AdAccountProps = {
    adAccountId: data.adAccountId,
    adAccountName: data.name,
  };
  return (
    <div className="flex alignCenter justifyBetween paddingX4 paddingY2 hover1">
      <div className="fz14 spacingY1">
        <div className="flex spacing2">
          <div title="Account name">{data.name}</div>
          <Badge
            className="fz12"
            color={data.sharedStatus === 'shared' ? 'green' : 'orange'}
            title="Audience status"
          >
            {data.sharedStatus}
          </Badge>
        </div>
        <div className="flex spacing2">
          <div className="c-gray" title="Account ID">
            {data.adAccountId}
          </div>
          {data.status >= 909 && (
            <Badge
              className="fz12"
              color="red"
              title={`Account status: ${data.status}`}
            >
              Not connected
            </Badge>
          )}
        </div>
      </div>
      <div>
        {data.status >= 909 ? (
          <div className="fz12 cup" onClick={() => onResolve(modalProps)}>
            resolve
          </div>
        ) : (
          <div className="fz12 cup" onClick={() => onRevoke(modalProps)}>
            revoke
          </div>
        )}
      </div>
    </div>
  );
};

interface SharedWithListProps {
  audienceId: string;
  audienceName: string;
  data: AdAccount[];
}

export const SharedWithList = ({
  audienceId,
  audienceName,
  data,
}: SharedWithListProps) => {
  const revokeAudienceAccessModal = useModal(RevokeAudienceAccessModal, {
    defaultProps: {
      audienceId,
      audienceName,
    },
  });

  const resolveAdAccountAccessModal = useModal(ResolveAdAccountAccessModal, {
    defaultProps: {
      audienceId,
      audienceName,
    },
  });

  return (
    <div>
      {data.map((acc) => {
        return (
          <SharedWithItem
            data={acc}
            onRevoke={revokeAudienceAccessModal.show}
            onResolve={resolveAdAccountAccessModal.show}
            key={acc.id}
          />
        );
      })}
    </div>
  );
};