<script lang="ts">
    import { daysOfWeek } from "$lib";
    import CrossUrl from "../../assets/cross.svg";
    interface Props {
        index: number;
        openingValue: string;
        closingValue: string;
        openTodayStatus: boolean | null;
        onHide?: () => void;
        day: number; //0-6 for Sunday-Saturday, 7 for all days, 8 for all other days
    }

    let {
        index,
        openingValue = $bindable(),
        closingValue = $bindable(),
        openTodayStatus = $bindable(),
        day = $bindable(),
        onHide
    }: Props = $props();
</script>

<div class="opening-time-item">
    {#if day <= 6}
        <select bind:value={day} class="dayOfWeek">
            {#each [0, 1, 2, 3, 4, 5, 6] as dayNum (dayNum)}
                <option value={dayNum}>{daysOfWeek[dayNum]}</option>
            {/each}
        </select>
    {:else}
        <label for={"opens-" + index} class="dayOfWeek">{daysOfWeek[day]}</label>
    {/if}
    <label for={"isAllDay-" + index}>
        <input
            id={"isAllDay-" + index}
            class="checkbox"
            type="checkbox"
            bind:checked={
                () => openTodayStatus === true, (v) => (openTodayStatus = v ? true : null)
            }
        />
        Open all day
    </label>
    <label for={"isclosed-" + index}>
        <input
            id={"isclosed-" + index}
            class="checkbox"
            type="checkbox"
            bind:checked={
                () => openTodayStatus === false, (v) => (openTodayStatus = v ? false : null)
            }
        />
        Closed
    </label>
    {#if onHide}
        <button class="hideButton" onclick={onHide} type="button">
            <img src={CrossUrl} alt="nah" />
        </button>
    {/if}
    {#if openTodayStatus === null}
        <div class="timeRange">
            <input id={"opens-" + index} type="time" bind:value={openingValue} />
            <span class="to">to</span>
            <input id={"closes-" + index} type="time" bind:value={closingValue} />
        </div>
    {/if}
</div>

<style>
    .opening-time-item {
        display: flex;
        flex-direction: row;
        gap: 0.25rem 1rem;
        padding: 0.5rem;
        align-items: center;
        flex-wrap: wrap;
        position: relative;
    }

    input[type="time"] {
        border: 2px solid #000000;
        border-radius: 4px;
        background: none;
        color: #000000;
        padding: 0.25rem;
        flex: 1;
        filter: brightness(0) saturate(100%) invert(98%) sepia(8%) saturate(555%) hue-rotate(54deg)
            brightness(100%) contrast(102%);
    }

    input[type="checkbox"] {
        margin: 0;
        padding: 0;
    }

    .timeRange {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        align-items: center;
        width: 100%;
    }

    .dayOfWeek {
        display: flex;
        align-items: center;
        font-weight: bold;
        justify-content: center;
        text-align: center;
        border-radius: 0.25rem;
        background-color: #eaffeb;
        color: #2e4653;
        cursor: pointer;
        padding: 0.2rem 0.4rem;
        font-size: 1rem;
    }

    .hideButton {
        background: none;
        border: none;
        margin: 0 0.5% 0 auto;
        width: 5%;
        padding: 0;
        overflow: visible;
    }

    .hideButton img {
        width: 120%;
        transform: scale(2);
    }
</style>
