import React, { useState } from "react";

import { MultistageModalForm } from "components/MultistageForm";
import { CustomItemReleaseForm } from "./stages/CustomItemReleaseForm";
import { MusicItemInformationForm } from "./stages/MusicItemInformationForm";

import { MediaUpload } from "redux/Common/types";

import {
  MusicItem,
} from "models/talent/talent-profile-module.model";

import moment from "moment";
import { isDisabledDate } from "./utilities/isDisabledDate";
import { noop } from "utils/noop";

import "./PreReleaseModal.scss";

import { MusicReleaseType, MusicReleaseMode } from "@komi-app/shared-types"

interface PreReleaseCustomModalProps {
  isEdit: boolean;
  music?: MusicItem;
  onFinish?: (data: any) => void;
  onCancel: () => void;
}

export const PreReleaseCustomModal: React.FC<PreReleaseCustomModalProps> = ({
  isEdit,
  music,
  onFinish = noop,
  onCancel,
}) => {
  const [photo, setPhoto] = useState<MediaUpload>({});

  const onFormFinish = (data: any) => {
    const { artists, customLink, releaseDate, title } = data;

    const links = [{ type: "customLink", url: customLink }];
    const metadata = {
      artists: artists.map((item: any) => ({
        name: item.name,
      })),
      name: title,
      images: [{ url: photo.url }],
    };

    const payload = {
      id: music?.id,
      order: music?.order,
      metadata,
      links,
      type: MusicReleaseType.CUSTOM_PRE_SAVE,
      releaseDate: moment(releaseDate).startOf("day").utc(),
      releaseType: MusicReleaseMode.CUSTOM,
      ...data,
    };

    onFinish(payload);
    onCancel();
  };

  return (
    <MultistageModalForm
      title="Setup Pre-Release Custom Link"
      onCancel={onCancel}
      onFinish={onFormFinish}
    >
      <MusicItemInformationForm
        isEdit={isEdit}
        music={music}
        photo={photo}
        setPhoto={setPhoto}
      />
      <CustomItemReleaseForm
        isEdit={isEdit}
        music={music}
        isDisabledDate={isDisabledDate}
      />
    </MultistageModalForm>
  );
};
