import { Badge, Descriptions, Image } from "antd";
import React, {useEffect, useState} from "react";
import { Link, useParams } from "react-router-dom";
import {DirectorIO, MovieIO} from "./Preview";
import axiosConfig from '../axios-config';
import { ErrorPage } from "./ErrorPage";

export const MoviePage = () => {
  const { id, name } = useParams();

  const [movie, setMovie] = useState<MovieIO>({} as MovieIO);
  const [director, setDirector] = useState<DirectorIO>({} as DirectorIO);
  const [isError, setIsError] = useState<boolean>(false);


  useEffect(() => {
    const fetchMovie = async () => {
      try {
        const response = await axiosConfig.get("movies/" + id);
        setMovie(response.data);
        if (response.data.director) {
          setDirector(response.data.director);
        }
      } catch (err) {
        setIsError(true);
      }
    }

    void fetchMovie();
  }, [])

  if (isError) {
    return <ErrorPage />;
  }

  return (
    <>
      <Descriptions
        title={movie.name}
        bordered
        style={{ padding: "5%" }}
      >
        <Descriptions.Item label="Title picture" span={3}>
          <Image src={movie.picture}></Image>
        </Descriptions.Item>
        <Descriptions.Item label="Name" span={2}>
          {movie.name}
        </Descriptions.Item>
        <Descriptions.Item label="Original Name">
          {movie.originalName}
        </Descriptions.Item>
        <Descriptions.Item label="Description" span={3}>
          {movie.intro}
        </Descriptions.Item>
        <Descriptions.Item label="Published">
          {movie.publishedAt}
        </Descriptions.Item>
        <Descriptions.Item label="Runtime" span={2}>
          {movie.runTimeMinutes} minutes
        </Descriptions.Item>
      </Descriptions>
      <Descriptions title="Director" bordered style={{ padding: "5%" }}>
        <Descriptions.Item label="Name" span={3}>
          <Link to={`/director/${director.id}`}>
            {director.name} {director.surname}
          </Link>
        </Descriptions.Item>
        <Descriptions.Item label="Birthdate">
          {director.birthDate}
        </Descriptions.Item>
      </Descriptions>
    </>
  );
};