import { useFragmentQuery } from 'lib/apollo/useFragmentQuery';
import { useModal } from 'components/layers';

import { Box, Button } from 'components/common';
import { ModalContainer } from 'components/modals';
import { SharedWithList, sharedAudience } from './SharedWithList';
import { ShareAudienceModal } from './ShareAudienceModal';
import { AudienceExtendedFragment } from 'types/graphql';

// const shared = (acc) => acc.sharedStatus === 'shared';

interface SharedWithModalProps {
  audienceId: string;
  audienceName: string;
  onDismiss?: () => void;
}

export const SharedWithModal = ({
  audienceId,
  audienceName,
  onDismiss,
}: SharedWithModalProps) => {
  const data = useFragmentQuery<AudienceExtendedFragment>(
    sharedAudience,
    audienceId
  );

  const shared = data?.sharedWith;

  const shareAudienceModal = useModal(ShareAudienceModal, {
    defaultProps: { audienceId },
  });

  return (
    <ModalContainer title="Shared with">
      <div className="mb4" style={{ marginLeft: -16, marginRight: -16 }}>
        {shared?.length ? (
          <SharedWithList
            audienceId={audienceId}
            audienceName={audienceName}
            data={shared}
          />
        ) : (
          <div className="paddingX4 paddingY2 fz14">Not shared yet</div>
        )}
      </div>
      <Box display="flex" column spacingY={2}>
        <Button onClick={() => shareAudienceModal.show()} color="blue" block>
          Share with...
        </Button>
        <Button onClick={onDismiss} color="gray" block>
          Close
        </Button>
      </Box>
    </ModalContainer>
  );
};