import { Modal } from "antd";
import { Icon } from "components/Icon";
import { PODCAST_MODAL_STEP, PODCAST_TYPE } from "constants/module";
import { PodcastItem } from "models/talent/talent-profile-module.model";
import * as React from "react";
import { useCallback, useState } from "react";

import "./index.scss";
import individualPodcast from "./steps/individualPodcast";
import selectPodcastType from "./steps/selectPodcastType";
import syncLatestPodcast from "./steps/syncLatestPodcast";
interface PodcastModalProps {
  show?: boolean;
  modalStatus: any;
  setStatusModal: React.Dispatch<React.SetStateAction<any>>;
  step?: PODCAST_MODAL_STEP;
  onSubmit?: (values: any) => void;
  item?: PodcastItem;
  cancellable?: boolean;
  onConnectSpotify?: () => void;
}

const PodcastModal = ({
  show,
  setStatusModal,
  step = PODCAST_MODAL_STEP.SELECT_PODCAST_TYPE,
  onSubmit,
  item,
  cancellable,
  modalStatus,
  onConnectSpotify,
}: PodcastModalProps) => {
  const [selectedType, setSelectedType] = useState(PODCAST_TYPE.SYNC_LATEST);
  const [syncStep, setSyncStep] = useState(1);

  const handleClose = useCallback(() => {
    setStatusModal({
      visible: false,
      status: PODCAST_MODAL_STEP.SELECT_PODCAST_TYPE,
      item: undefined,
    });
    setSelectedType(PODCAST_TYPE.SYNC_LATEST);
    setSyncStep(1);
  }, []);
  const handleBack = useCallback(() => {
    if (syncStep === 2) {
      setSyncStep(1);
      return;
    }
    setStatusModal((values: any) => ({
      ...values,
      status: PODCAST_MODAL_STEP.SELECT_PODCAST_TYPE,
    }));
  }, [syncStep, modalStatus]);
  const onSelectedStep = useCallback(() => {
    setStatusModal((values: any) => ({
      ...values,
      status:
        selectedType === PODCAST_TYPE.SYNC_LATEST
          ? PODCAST_MODAL_STEP.SYNC_LATEST
          : PODCAST_MODAL_STEP.INDIVIDUAL,
    }));
  }, [selectedType]);
  const handleSubmit = async (values: any) => {
    onSubmit?.(values);
    setTimeout(() => {
      handleClose();
    }, 150);
  };

  const getView = (value: PODCAST_MODAL_STEP) => {
    if (!show) {
      return null;
    }
    const stepMap: any = {
      [PODCAST_MODAL_STEP.SELECT_PODCAST_TYPE]: () =>
        selectPodcastType({
          type: selectedType,
          select: setSelectedType,
          close: handleClose,
          callback: onSelectedStep,
        }),
      [PODCAST_MODAL_STEP.SYNC_LATEST]: () =>
        syncLatestPodcast({
          close: handleClose,
          back: handleBack,
          callback: handleSubmit,
          item,
          cancellable,
          step: syncStep,
          setStep: setSyncStep,
          show,
          onConnectSpotify,
        }),
      [PODCAST_MODAL_STEP.INDIVIDUAL]: () =>
        individualPodcast({
          close: handleClose,
          back: handleBack,
          callback: handleSubmit,
          item,
          cancellable,
          step: syncStep,
          setStep: setSyncStep,
          show,
          onConnectSpotify,
        }),
    };

    const make = stepMap[value];

    return make();
  };
  const view = getView(step);

  const title = view?.title || "";
  const content = view?.content;

  const footer = view?.footer || null;

  return (
    <Modal
      closable
      centered
      className="podcast-modal"
      visible={show}
      title={title}
      width={706}
      maskClosable={false}
      onCancel={handleClose}
      footer={footer}
      closeIcon={<Icon name="close" />}
    >
      <div className="p__x--24 p__t--24">{content}</div>
    </Modal>
  );
};

export default PodcastModal;
