<script lang="ts">
    import {anime} from "./GetAniListSingleItemAndOpenModal.svelte";
    import {Button} from "flowbite-svelte";
    import StarRatting from "@ernane/svelte-star-rating"

    const ratingInWords = {
        0: "Not Reviewed",
        1: "Apalling",
        2: "Horrible",
        3: "Very Bad",
        4: "Bad",
        5: "Average",
        6: "Fine",
        7: "Good",
        8: "Very Good",
        9: "Great",
        10: "Masterpiece",
    }

    const title = anime.data.MediaList.media.title.english !== "" ?
        anime.data.MediaList.media.title.english :
        anime.data.MediaList.media.title.romaji

    let config = {
        readOnly: false,
        countStars: 5,
        range: {
            min: 0,
            max: 5,
            step: 0.5
        },
        score: anime.data.MediaList.score / 2,
        showScore: false,
        scoreFormat: function () {
            return `(${this.score.toFixed(1)}/${this.countStars})`
        },
        name: "",
        starConfig: {
            size: 32,
            fillColor: '#F9ED4F',
            strokeColor: "#e2c714",
            unfilledColor: '#FFF',
            strokeUnfilledColor: '#000'
        }
    }

    let values = {
        progress: anime.data.MediaList.progress,
        status: anime.data.MediaList.status,
        startedAt: {
            year: anime.data.MediaList.startedAt.year,
            month: anime.data.MediaList.startedAt.month,
            day: anime.data.MediaList.startedAt.day
        },
        completedAt: {
            year: anime.data.MediaList.completedAt.year,
            month: anime.data.MediaList.completedAt.month,
            day: anime.data.MediaList.completedAt.day
        },
        repeat: anime.data.MediaList.repeat,
        score: anime.data.MediaList.score,
        notes: anime.data.MediaList.notes
    }

    const changeRating = (e) => {
        config.score = e.target.valueAsNumber
        values.score = e.target.valueAsNumber * 2
    }

    let count = 1;

    const decrement = () => {
        if (count > 0) {
            count--
        }
    }

    const increment = () => {
        count++
    }

    let startedAtDate = `${values.startedAt.year}-${values.startedAt.month}-${values.startedAt.day}`

    const transformStartedAtDate = (e) => {
        const re = /^([0-9]{4})-([0-9]{2})-([0-9]{2})/
        const date = re.exec(e.target.value)
        values.startedAt.year = Number(date[1])
        values.startedAt.month = Number(date[2])
        values.startedAt.day = Number(date[3])
    }

    console.log(startedAtDate)
</script>

<div>
    <div class="grid grid-rows-2 grid-cols-10 grid-flow-col gap-4 mt-10">
        <div class="row-span-2 col-span-2 space-y-3">
            <img class="rounded-lg" src={anime.data.MediaList.media.coverImage.large} alt="{title} Cover Image">
            <StarRatting bind:config on:change={changeRating}/>
            <p>Rating:  {config.score * 2}</p>
            <p>{ratingInWords[config.score * 2]}</p>
        </div>

        <div class="col-span-8 z-30">
            <div class="flex flex-row p-10 justify-center gap-x-56">


                <div class="mr-4">
                    <label for="episodes" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Episode Progress</label>
                    <input
                            type="number"
                            name="episodes"
                            min="0"
                            id="episodes"
                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
                            focus:border-primary-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400
                            dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                            bind:value={values.progress}
                            required>
                </div>


                <div>
                    <label for="status" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Select
                        your
                        country</label>
                    <select id="status"
                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500
                            focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400
                            dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                    >

                        <option>CURRENT</option>
                        <option>PLANNING</option>
                        <option>COMPLETED</option>
                        <option>DROPPED</option>
                        <option>PAUSED</option>
                        <option>REPEATING</option>
                    </select>
                </div>
            </div>
            <div class="flex flex-row p-10 justify-center">

                <div class="relative z-40 max-w-sm">
                    <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
                        <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>
                        </svg>
                    </div>
<!--                    <input-->
<!--                            datepicker-->
<!--                            datepicker-buttons-->
<!--                            datepicker-autoselect-today-->
<!--                            datepicker-autohide-->
<!--                            datepicker-title="Started At"-->
<!--                            id="startedAt"-->
<!--                            type="text"-->
<!--                            name="startedAt"-->
<!--                            class="z-50 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500-->
<!--                            focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600-->
<!--                            dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"-->
<!--                            value={`${values.startedAt.year}-${values.startedAt.month}-${values.startedAt.day}`}-->
<!--                            on:change={transformStartedAtDate}-->
<!--                    >-->
                    <input
                            id="startedAt"
                            type="date"
                            name="startedAt"
                            class="z-50 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500
                            focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600
                            dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                            value={startedAtDate}
                            on:change={transformStartedAtDate}
                    >
                </div>

            </div>
        </div>
    </div>
    <footer class="bg-white rounded-lg shadow m-4 dark:bg-gray-800">
        <div class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-end">
            <Button
                    class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium
                    rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none
                    dark:focus:ring-blue-800"
                    on:click={() => alert('Handle "success"')}>Sync Changes
            </Button>
            <Button
                    class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4
                    focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:text-white
                    dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700">
                Cancel
            </Button>
        </div>
    </footer>
</div>