import { useMemo } from 'react';
import { useQuery } from '@apollo/client';
import { LOOKALIKE_PROPS } from '../schema/queries';

import { useSimpleForm } from 'hooks/useSimpleForm';
import { useModal } from 'components/layers';

import { Box, Button, Text, Spinner } from 'components/common';
import { ModalContainer } from 'components/modals';
import { ConfirmAudienceModal } from './ConfirmAudienceModal';
import { Multiselect, RangeInput } from 'components/inputs';
import { LookalikePropsQuery } from 'types/graphql';

const toInput = (item: { id: number | string; name: string }) => ({
  id: item.id,
  value: String(item.id),
  label: item.name,
});

interface LookalikeFormProps {
  data: {
    ratios: { id: number; name: string }[];
    countries: { id: string; name: string }[];
  };
  state: {
    ratio: number;
    countries: string[];
  };
  handleChange: React.ChangeEventHandler<HTMLInputElement>;
}

const LookalikeForm = ({ data, state, handleChange }: LookalikeFormProps) => {
  const ratios = useMemo(() => data.ratios?.map(toInput), [data]);
  const countries = useMemo(() => data.countries?.map(toInput), [data]);

  return (
    <Box
      position="relative"
      spacingY={4}
      style={{ marginLeft: -16, marginRight: -16 }}
    >
      <Multiselect
        label="Select Audience Location"
        options={countries}
        name="countries"
        onChange={handleChange}
        state={state.countries}
      />
      <Box paddingX={4} spacingY={2}>
        <RangeInput
          name="ratio"
          value={state.ratio}
          onChange={handleChange}
          min={ratios[0].value}
          max={ratios[ratios.length - 1].value}
          step={0.01}
          label="Select Audience Size"
          formattedValue={Math.round(state.ratio * 100) + '%'}
        />
        <Text size="xs">
          Audience size ranges from 1% to 10% of the combined population of your
          selected locations. A 1% lookalike consists of the people most similar
          to your lookalike source. Increasing the percentage creates a bigger,
          broader audience.
        </Text>
      </Box>
    </Box>
  );
};

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

export const CreateLookalikeModal = ({
  audienceId,
  onDismiss,
}: CreateLookalikeModalProps) => {
  const confirmAudienceModal = useModal(ConfirmAudienceModal, {
    defaultProps: { dismissParent: onDismiss },
  });
  const { data, loading } = useQuery<LookalikePropsQuery>(LOOKALIKE_PROPS);

  const [state, handleChange] = useSimpleForm<{
    countries: string[];
    ratio: number;
  }>({
    countries: [],
    ratio: 0.01,
  });

  const handleSubmit: React.FormEventHandler<HTMLFormElement> = async (ev) => {
    ev.preventDefault();
    const variables = {
      audienceId: audienceId,
      ...state,
      ratio: Number(state.ratio),
    };
    confirmAudienceModal.show({ input: variables });
  };

  return (
    <ModalContainer title="Create Lookalike Audience">
      <form onSubmit={handleSubmit} className="spacingY4">
        {data && (
          <LookalikeForm
            data={data}
            state={state}
            handleChange={handleChange}
          />
        )}
        <Spinner show={loading} />
        <Box display="flex" marginY={4} spacing={2}>
          <Button block onClick={onDismiss} color="gray">
            Cancel
          </Button>
          <Button
            type="submit"
            // onClick={handleSubmit}
            block
            color="blue"
            disabled={loading}
          >
            Confirm
          </Button>
        </Box>
      </form>
    </ModalContainer>
  );
};