<template>
    <div class="hy-list-item" :class="{ clickable, disabled, loading }">
        <hy-list-icon :color="color">
            <slot v-if="$slots.icon" name="icon" />
            <i v-if="icon != undefined" :class="icon"></i>
        </hy-list-icon>

        <hy-flex-container class="content" :allowBreak="false">
            <slot />
            <slot name="content" />
        </hy-flex-container>

        <transition name="hy-fade-transition">
            <span v-if="clickable && loading == false" class="chevron">
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 1000" width="30" height="30">
                    <path
                        d="M102.406+249.281C80.8052+248.6+59.077+257.194+43.6875+274.688C16.3284+305.787+19.3688+353.203+50.4688+380.562L450.062+732.062C478.366+756.962+520.734+756.995+549.062+732.125L949.469+380.594C980.596+353.266+983.703+305.878+956.375+274.75C929.047+243.622+881.659+240.547+850.531+267.875L499.656+575.906L149.531+267.938C135.925+255.968+119.207+249.811+102.406+249.281Z"
                    />
                </svg>
            </span>
        </transition>

        <transition name="hy-fade-transition">
            <HyLoader v-if="loading && progress == null" :width="25" :height="25" :line="3" />
        </transition>

        <transition name="hy-fade-transition">
            <HyProgressBar
                v-if="loading && isNaN(progress) == false && typeof progress == 'number'"
                :progress="progress"
                :width="progressWidth"
            />
        </transition>
    </div>
</template>

<script>
import HyFlexContainer from "./FlexContainer.vue";
import HyLoader from "./Loader.vue";
import HyProgressBar from "./ProgressBar.vue";

export default {
    name: "HyListItem",
    props: {
        icon: {
            type: String,
            default: null,
        },
        color: {
            type: String,
            default: "transparent",
        },
        clickable: {
            type: Boolean,
            default: false,
        },
        loading: {
            type: Boolean,
            default: false,
        },
        progress: {
            type: Number,
            default: null,
        },
        progressWidth: {
            type: String,
            default: "min(50%, 70px)",
        },
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {};
    },
    created() {},
    components: {
        HyFlexContainer,
        HyLoader,
        HyProgressBar,
    },
};
</script>

<style lang="scss">
.hy-list-item {
    margin: var(--hy-element-margin);
    display: flex;
    gap: var(--hy-flex-gap);
    align-items: center;
    justify-content: space-between;
    position: relative;

    &.clickable {
        cursor: pointer;

        & > .content {
            padding-right: calc(16px + var(--hy-flex-gap)); // Icon size + gap
        }
    }

    &.disabled {
        cursor: not-allowed;

        & > .chevron,
        & > .content {
            opacity: 50%;
        }
    }

    &.loading {
        cursor: not-allowed;
    }

    & > .content {
        flex: 1;
        margin: 0;
        transition: var(--hy-element-transition);
        transition-property: opacity;
        min-width: 0;

        /* & > * {
            min-width: 0;
        } */
    }

    & > .chevron {
        position: absolute;
        width: 16px;
        height: 16px;
        right: 0px;
        display: flex;
        align-items: center;
        margin: 0;
        pointer-events: none;
        transition: var(--hy-element-transition);
        transition-property: transform, opacity;
        transform: rotate(-90deg);

        svg {
            fill: var(--hy-font-color-contrast);
        }
    }
}
</style>
