import React, { useState, useMemo, useEffect } from "react";
import { Form, Radio, Button, message } from "antd";
import { TrackForm } from "./manage-store/TrackForm";
import { AddArtistForm } from "./manage-store/AddArtistForm";
import { AddAlbumForm } from "./manage-store/AddAlbumForm";
import { useErrors } from "../hooks/useErrors";
import { useAppState } from "../hooks/useAppState";
import { addTrack, addArtist, addAlbum } from "../api/calls";
import { MESSAGE_TIMEOUT } from "../util/constants";

const FORM_TYPES = {
  track: "track",
  artist: "artist",
  album: "album",
  playlist: "",
};

const chooseForm = (type) => {
  return (
    (type === "track" && <TrackForm />) ||
    (type === "artist" && <AddArtistForm />) ||
    (type === "album" && <AddAlbumForm />)
  );
};

const ManageStore = () => {
  const [form] = Form.useForm();
  const { handleError } = useErrors();
  const { setLoading } = useAppState();
  const [formType, setFormType] = useState("track");

  useEffect(() => {
    form.resetFields();
  }, [formType]);

  const formElement = useMemo(() => {
    return chooseForm(formType);
  }, [formType]);

  const onChangeForm = (event) => {
    setFormType(event.target.value);
  };

  const sendCreateRequest = ({ type, ...data }) => {
    setLoading(true);

    let promise;
    switch (type) {
      case FORM_TYPES.track:
        promise = addTrack({
          name: data.name,
          composer: data.composer,
          album: { ID: data.albumID },
          genre: { ID: data.genreID },
          unitPrice: data.unitPrice.toString(),
        });
        break;
      case FORM_TYPES.artist:
        promise = addArtist(data);
        break;
      case FORM_TYPES.album:
        promise = addAlbum({ title: data.name, artist: { ID: data.artistID } });
        break;
      default:
    }

    promise
      .then(() => {
        message.success("Entity successfully created", MESSAGE_TIMEOUT);
        form.resetFields();
      })
      .catch(handleError)
      .finally(() => setLoading(false));
  };

  return (
    <Form
      style={{ width: 700 }}
      form={form}
      labelCol={{
        span: 4,
      }}
      wrapperCol={{
        span: 14,
      }}
      layout="horizontal"
      initialValues={{
        type: formType,
      }}
      type={formType}
      onFinish={sendCreateRequest}
      onFinishFailed={() => console.log("Not valid params provided")}
    >
      <Form.Item label="Entity" name="type">
        <Radio.Group onChange={onChangeForm}>
          <Radio.Button value="track">Track</Radio.Button>
          <Radio.Button value="album">Album</Radio.Button>
          <Radio.Button value="artist">Artist</Radio.Button>
        </Radio.Group>
      </Form.Item>
      {formElement}
      <Form.Item
        type="primary"
        wrapperCol={{
          span: 14,
          offset: 4,
        }}
      >
        <Button onClick={() => form.submit()}>Create</Button>
      </Form.Item>
    </Form>
  );
};

export { ManageStore };