<script lang="ts">
    import type { timeperiod } from "./models/models";

    export let period: timeperiod;
    let width = ((period.endTime - period.startTime) * 100) / 24;
    let left = (period.startTime * 100) / 24;

    function toTime(n: number): string {
        return `${Math.floor(n)}:${Math.floor((n % 1) * 60)
            .toString()
            .padEnd(2, "0")}`;
    }
</script>

<div
    class="timeperiod"
    data-periodType={period.type}
    style={`width:${width}%; left: ${left}%`}
>
    {period.label || period.type} ({toTime(period.startTime)}-{toTime(
        period.endTime,
    )})
</div>

<style lang="sass">
    .timeperiod
        position: absolute
        height: 100%
        display: flex
        align-items: center
        justify-content: center
        font-size: .8rem
        &[data-periodType="first"]
            background: hsla(0, 40%, 60%, 0.6)

        &[data-periodType="work"]
            background: hsla(100, 40%, 60%, 0.6)

        &[data-periodType="placeholder"]
            background: hsla(55, 40%, 60%, 0.6)
</style>