import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { FormInstance, Tooltip } from "antd";
import { Paragraph } from "components/Typography";

import { SmartLinkSearchInput } from "./SmartLinkSearchInput";
import { SmartLinkSearchResult } from "../SmartLinkModal";
import { MultistageFormStageProps } from "components/MultistageForm/MultistageFormStage";
import { MultistageFormStage, warnAndThrow } from "components/MultistageForm";

import { ReactComponent as InfoIcon } from "icons/info.svg";

import { useUpdateEffect } from "hooks/useUpdateEffect";

import { Nullable } from "types/utilities";
import { DspResource } from "types/dsp";

import { dspService } from "services";

import "../SmartLinks.scss";
import "./SmartLinkSearch.scss";

interface SmartLinkSearchProps extends MultistageFormStageProps {
  setIsCustomLink: Dispatch<SetStateAction<boolean>>;
  setStage: Dispatch<SetStateAction<number>>;
}

export const SmartLinkSearch: React.FC<SmartLinkSearchProps> = ({
  accumulativeFormState = {},
  setIsCustomLink,
  setStage,
  ...props
}) => {
  const [form, setForm] = useState<FormInstance>();
  const [stageState, setStageState] = useState<Record<string, unknown>>();

  const [isModifiedSearchResult, setIsModifiedSearchResult] = useState(false);
  const [searchResult, setSearchResult] = useState<
    Nullable<SmartLinkSearchResult>
  >(accumulativeFormState.searchResult);
  const [selectedResource, setSelectedResource] = useState<
    Nullable<DspResource>
  >(accumulativeFormState.selectedResource);

  useEffect(() => {
    setIsCustomLink(false);
  }, []);

  useEffect(() => {
    setStageState((prevState) => ({ ...prevState, searchResult }));
  }, [searchResult]);

  useUpdateEffect(() => {
    setIsModifiedSearchResult(true);
  }, [searchResult]);

  const handleAddManualServiceLinkClick = () => {
    setIsCustomLink(true);
    setStage(2);
  };

  const handleFinish = async (formValues: any) => {
    if (!selectedResource) {
      return warnAndThrow("No resource selected");
    }

    const links = isModifiedSearchResult
      ? await dspService.getResourceLinks(selectedResource)
      : accumulativeFormState.links;

    return {
      ...formValues,
      links,
      searchResult,
      selectedResource, // Keep the `selectedResource` for returning back and forth
    };
  };

  return (
    <MultistageFormStage
      setForm={setForm}
      initialValues={stageState}
      onFinish={handleFinish}
      hideRequiredMark
      validateTrigger="onSubmit"
      {...props}
    >
      <Paragraph className="smart-link--title" preset="semibold18">
        Search Release
      </Paragraph>

      <Paragraph>
        To setup a Smart Link, start by searching one of the following:
      </Paragraph>

      <ul className="smart-link--criteria">
        <li>Artist + Song/Album</li>
        <li>Spotify URL</li>
        <li>UPC</li>
        <li>ISRC</li>
      </ul>

      <SmartLinkSearchInput
        form={form}
        searchResult={searchResult}
        setSearchResult={setSearchResult}
        setSelectedResource={setSelectedResource}
      />

      <Paragraph className="smart-link--manual">
        Can&apos;t find your release?
        <Link
          role="link"
          className="smart-link--manual-link"
          onClick={handleAddManualServiceLinkClick}
          to="#"
        >
          Add services manually
        </Link>
        <Tooltip
          overlayInnerStyle={{ textAlign: "center", maxWidth: "200px" }}
          placement="top"
          title="Select services and enter links manually"
        >
          <InfoIcon role="tooltip" className="smart-link--manual-info" />
        </Tooltip>
      </Paragraph>
    </MultistageFormStage>
  );
};
