import { useMemo, useState } from 'react';
import { useQuery, gql } from '@apollo/client';
import { KlaviyoListsQuery } from 'types/graphql';

import { Box, Button, Spinner } from 'components/common';
import { KlaviyoList } from 'components/klaviyo/KlaviyoList';

const EXPORTED_PREFIX = 'Fansifter';
const startsWithPrefix = (name: string) => name.startsWith(EXPORTED_PREFIX);

const KLAVIYO_LISTS = gql`
  query KLAVIYO_LISTS {
    lists: klaviyoLists {
      id
      name
      folder
      listType
      personCount
      dateCreated: timestampCreated
      lastUpdated: timestampUpdated
    }
  }
`;

interface KlaviyoImportScreenProps {
  selected: string[];
  onSelect: React.ChangeEventHandler<HTMLInputElement>;
  onImport: () => void;
}

export const KlaviyoImportScreen = ({
  selected,
  onSelect,
  onImport,
}: KlaviyoImportScreenProps) => {
  const { data, loading } = useQuery<KlaviyoListsQuery>(KLAVIYO_LISTS);
  const [hideExported, setHideExported] = useState(true);

  const isSelected = selected.length !== 0;

  const items = useMemo(
    () =>
      data?.lists?.filter((item) =>
        hideExported ? !startsWithPrefix(item.name) : true
      ),
    [data, hideExported]
  );

  const exportedLists = useMemo(
    () => data?.lists?.filter((item) => startsWithPrefix(item.name)),
    [data]
  );
  const hasExportedLists = Boolean(exportedLists?.length);

  if (loading) return <Spinner show />;

  if (items && items.length > 0) {
    return (
      <div>
        <KlaviyoList items={items} selected={selected} onSelect={onSelect} />
        <Box
          className="tac bg-white"
          position="sticky"
          bottom={0}
          display="flex"
          align="center"
          justify="between"
          padding={4}
        >
          <label className="fz14 spacing2 paddingX4 cup">
            <input
              type="checkbox"
              onChange={(ev) => setHideExported(!ev.target.checked)}
              disabled={!hasExportedLists}
            />
            <span className={!hasExportedLists ? 'disabled' : undefined}>
              Show Fansifter's segments{' '}
              {hasExportedLists && (
                // @ts-expect-error
                <span className="c-blue">({exportedLists.length})</span>
              )}
            </span>
          </label>
          <Button size="l" onClick={() => onImport()} disabled={!isSelected}>
            Import selected
          </Button>
        </Box>
      </div>
    );
  } else {
    return <div className="tac">Nothing to import</div>;
  }
};