import { FaClock, FaEye } from 'react-icons/fa6';
import {NameItem, VoteEditModel, VoteDeleteModel, EditDateModel} from "../../../../api/models/Types.tsx";
import {
    FormatDate,
    FormatDurationTicks,
    GetAnimeItemViews,
    GetAnimeItemYear,
} from "../../../../common/AnimeItemHelper.tsx";
import { getDate } from '../../../../common/Helper.tsx';
import { MdOutlineVideoCameraBack } from 'react-icons/md';
import RatingComponent from '../../../../components/RatingComponent.tsx';
import {GetTitleNames, TitleNames} from "../../../../components/library/NameComponent.tsx";
import {useEffect, useState } from 'react';
import { PiFilmStripFill } from 'react-icons/pi';
import {UnvoteAnimeEpisode, VoteAnimeEpisode} from "../../../../api/AnimeEpisodeApi.tsx";
import { useNavigate } from 'react-router-dom';
import { Card } from 'primereact/card';
import {SetAnimeTitleReleaseDate} from "../../../../api/AnimeTitleApi.tsx";
import { Button } from 'primereact/button';

interface EpisodeShortEditComponentProps {
    titleId: string;
    seasonId?: string | null | undefined;
    episodeId: string;
    episodeNumber: number;
    episodeVariant: number | null | undefined;
    previewImage?: string;
    names: Array<NameItem> | null | undefined,
    primaryLanguageId?: string | null | undefined,
    announcementDate: string | null | undefined;
    expectedReleaseDate: string | null | undefined;
    releaseDate: string | null | undefined;
    isCompleted: boolean;
    duration?: number;
    myRating?: number;
    userRating?: number;
    viewsCount: number | null | undefined;
    myViewsCount?: number | null | undefined;
    lastViewPercentage: number | null | undefined;
    forceRefresh?: () => void | null | undefined;
    canVote: boolean;
}

const EpisodeShortEditComponent = ({titleId, seasonId, episodeId,
   episodeNumber, episodeVariant, previewImage, names, primaryLanguageId, announcementDate, expectedReleaseDate, releaseDate,
   isCompleted, duration, myRating, userRating, viewsCount, myViewsCount, lastViewPercentage, forceRefresh, canVote}: EpisodeShortEditComponentProps) => {
    const navigate = useNavigate();
    const [ name, setName ] = useState<TitleNames | null>(null);
    const [ isVoteEditing, setIsVoteEditing ] = useState<boolean>(false);
    useEffect(() => {
        const name = GetTitleNames(names, primaryLanguageId, true);
        setName(name);
    }, []);
    
    const getDetailUrl = () => `/library/anime/${titleId}${seasonId != null ? `/season/${seasonId}` : ''}/episode/${episodeId}`;

    const viewDetail = () =>
        navigate(getDetailUrl());

    return (
        <Card className='border-2 border-200 border-round-lg'
              header={() => (
                  <>
                      <div className='flex gap-2 cursor-pointer w-full' onClick={viewDetail}>
                          <h3 className='my-0'>Эпизод {episodeNumber}.{(episodeVariant != null && episodeVariant > 0) ? ` вар.${episodeVariant}` : ''}</h3>
                          {name?.titleElement}
                      </div>
                      <div className='flex gap-2 align-items-center'>
                          <Button icon="pi pi-pencil" severity='secondary' size='small' className='px-0 py-1'
                                  // onClick={() => navigate(`/admin/library/anime/${titleId}/season/${seasonId}/edit`)} />
                                  onClick={() => navigate(`/admin${getDetailUrl()}/edit`)} />
                      </div>
                  </>
              )}
              pt={{
                  header: () => ({
                      className: 'surface-100 border-round-md border-noround-bottom py-1 px-2 cursor-pointer flex justify-content-between'
                  }),
                  body: () => ({
                      className: 'p-0'
                  }),
                  content: () => ({
                      className: 'grid gap-2 border-200 px-1 pt-2 pb-0'
                  })
              }}
        >
            {previewImage &&
                <div className='col-2'>
                    <img src={previewImage} alt={`Season ${episodeNumber}`}
                         className='p-mr-2 border-round-md w-full cursor-pointer' onClick={viewDetail}
                         style={{maxHeight: '10em', objectFit: 'contain', objectPosition: 'left'}} />
                </div>
            }

            <div className="col flex flex-column gap-2 mt-2">
                <div className='grid gap-2 mx-1'>
                    <div className='col border-2 border-round-md border-100' style={{maxWidth:'25em'}}>
                        <RatingComponent
                            ratingObjectId={episodeId}
                            ratingPercentage={myRating}
                            userRatingPercentage={userRating}
                            isEditing={false}
                            setIsEditing={() => {}}
                            setVote={() => Promise.reject('')}
                            deleteVote={() => Promise.reject('')}
                            forceRefresh={() => {}}
                            canVote={false}
                        />
                    </div>
                </div>

                <div className='flex flex-row gap-4 mx-1'>
                        <span className='flex align-items-center gap-2'>
                            {isCompleted ?
                                (<PiFilmStripFill className='text-200' />)
                                : (<MdOutlineVideoCameraBack className={`text${releaseDate != null ? '-green' : ''}-500`} />)}
                            {(releaseDate == null) ? (
                                    <>
                                        Анонс: {FormatDate(getDate(announcementDate))}
                                    </>
                                )
                                :(
                                    <>
                                        Вышел: {FormatDate(getDate(releaseDate))}
                                    </>
                                )
                            }
                        </span>
                    <span><FaClock /> Длительность: {FormatDurationTicks(duration)}</span>
                </div>
            </div>
        </Card>
    );
};

export default EpisodeShortEditComponent;
