import { useModal } from 'components/layers';

import { Button } from 'components/common';
import { DeleteAdAccountModal } from './modals';

export const AdAccountItem = ({
  data,
  onDisconnect,
}: {
  data: {
    id: string;
    name: string;
    description: string;
    status: number;
  };
  onDisconnect: () => void;
}) => {
  return (
    <div className="w100 flex alignCenter justifyBetween paddingX4 paddingY2 hover1 rounded2 fz14">
      <div>
        <div title={data.description}>{data.name}</div>
        <div className="fz12">{data.id}</div>
      </div>
      {data.status >= 900 && (
        <Button size="s" color="gray" onClick={onDisconnect}>
          Disconnect
        </Button>
      )}
    </div>
  );
};

export const AdAccountsList = ({
  data,
}: {
  data?: {
    id: string;
    name: string;
    description: string;
    status: number;
  }[];
}) => {
  const deleteAdAccountModal = useModal(DeleteAdAccountModal);

  return (
    <div
      className="spacingY2 oa"
      style={{ maxHeight: 54 * 5, borderTop: '1px solid var(--borderColor)' }}
    >
      {data?.length ? (
        data?.map((acc) => {
          return (
            <AdAccountItem
              data={acc}
              onDisconnect={() =>
                deleteAdAccountModal.show({ id: acc.id, name: acc.name })
              }
              key={acc.id}
            />
          );
        })
      ) : (
        <div
          className="w100 flex alignCenter justifyBetween paddingX4 paddingY2 fz14 c-gray"
          style={{ height: 52 }}
        >
          No Ad accounts connected
        </div>
      )}
    </div>
  );
};