import { useQuery, gql } from '@apollo/client';
import { ExportCsvQuery, ExportCsvQueryVariables } from 'types/graphql';

import { Box, Button, Text, Spinner } from 'components/common';
import { ModalContainer } from 'components/modals';

const EXPORT_CSV = gql`
  query EXPORT_CSV($collectionId: ID!) {
    file: exportCSV(collectionId: $collectionId) {
      downloadUrl
      profileCount
    }
  }
`;

interface FileExportModalProps {
  collectionId: string;
  onDismiss?: () => void;
}

export const FileExportModal = ({
  collectionId,
  onDismiss,
}: FileExportModalProps) => {
  const { data, loading } = useQuery<ExportCsvQuery, ExportCsvQueryVariables>(
    EXPORT_CSV,
    { variables: { collectionId } }
  );

  return (
    <ModalContainer title="Export as CSV">
      <Box spacingY={4}>
        {loading ? null : data?.file?.profileCount ? (
          <Box display="flex" justify="between">
            <Text size="s">Profiles to be exported</Text>
            <Text size="s" weight="bold">
              {data.file.profileCount}
            </Text>
          </Box>
        ) : (
          <Text size="s">
            You can only export to csv file your owned first party fan profiles.
            This collection does not contain such fans.
          </Text>
        )}
        <Box spacingY={2}>
          {data?.file?.downloadUrl && (
            <Button as="a" href={data.file.downloadUrl} download block>
              Download .csv
            </Button>
          )}
          <Button onClick={onDismiss} block color="gray">
            Cancel
          </Button>
        </Box>
        <Spinner show={loading} />
      </Box>
    </ModalContainer>
  );
};