<script setup lang="ts">
    import { onBeforeUnmount } from 'vue';
    import { UIColor } from '@/UI-kit/constants';
    import type { UIIconsValues } from '@/UI-kit/types';
    import UISvgIcon from '@/UI-kit/components/UI/svg-icon/UISvgIcon.vue';

    export interface IDetailSheetAction {
        id: string;
        label: string;
        icon: UIIconsValues;
        danger?: boolean;
    }

    const props = withDefaults(
        defineProps<{
            actions: IDetailSheetAction[];
            cancelLabel: string;
            /** Поверх стека модалок приложения */
            zIndex?: number;
        }>(),
        { zIndex: 100_000 },
    );

    const visible = defineModel<boolean>({ default: false });

    const emit = defineEmits<{
        close: [];
        select: [id: string];
    }>();

    const iconColor = (action: IDetailSheetAction) =>
        action.danger ? UIColor['red-600'] : UIColor['gray-600'];

    const onOverlayClick = () => {
        visible.value = false;
        emit('close');
    };

    const onSelect = (id: string) => {
        emit('select', id);
    };

    const onCancelClick = () => {
        visible.value = false;
        emit('close');
    };

    onBeforeUnmount(() => {
        if (visible.value) {
            emit('close');
        }
    });
</script>

<template>
    <Teleport to="body">
        <Transition name="ui-detail-ctx">
            <div
                v-if="visible && actions.length > 0"
                class="ui-detail-ctx-overlay"
                :style="{ zIndex: props.zIndex }"
                @click="onOverlayClick"
            >
                <div class="ui-detail-ctx-content">
                    <div class="ui-detail-ctx-sheet" @click.stop>
                        <div class="ui-detail-ctx-actions" role="list">
                            <button
                                v-for="action in actions"
                                :key="action.id"
                                type="button"
                                class="ui-detail-ctx-actions__btn"
                                :class="{ 'ui-detail-ctx-actions__btn--danger': action.danger }"
                                @click="onSelect(action.id)"
                            >
                                <span class="ui-detail-ctx-actions__icon-wrap">
                                    <UISvgIcon
                                        class="ui-detail-ctx-actions__icon"
                                        :name="action.icon"
                                        :color="iconColor(action)"
                                    />
                                </span>
                                <span class="ui-detail-ctx-actions__label">{{ action.label }}</span>
                            </button>
                        </div>

                        <button type="button" class="ui-detail-ctx-cancel" @click="onCancelClick">
                            {{ cancelLabel }}
                        </button>
                    </div>
                </div>
            </div>
        </Transition>
    </Teleport>
</template>

<style scoped lang="scss">
    .ui-detail-ctx-overlay {
        position: fixed;
        inset: 0;
        overflow-y: auto;
        overscroll-behavior: none;
        background: rgb(0 0 0 / 50%);
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);
    }

    .ui-detail-ctx-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-height: 100%;
    }

    .ui-detail-ctx-sheet {
        position: sticky;
        bottom: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 8px 12px max(12px, env(safe-area-inset-bottom, 0));
    }

    .ui-detail-ctx-actions {
        overflow: hidden;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 1px 0 rgb(0 0 0 / 6%);
    }

    .ui-detail-ctx-actions__btn {
        display: flex;
        gap: 14px;
        align-items: center;
        width: 100%;
        padding: 14px 16px;
        font-family: inherit;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.2;
        color: #2b2b2b;
        text-align: left;
        cursor: pointer;
        background: transparent;
        border: none;
        transition: background-color 0.12s ease;
    }

    .ui-detail-ctx-actions__btn + .ui-detail-ctx-actions__btn {
        border-top: 1px solid #d8d8d8;
    }

    .ui-detail-ctx-actions__btn:active {
        background: #ededed;
    }

    .ui-detail-ctx-actions__btn--danger {
        color: #d13c3c;
    }

    .ui-detail-ctx-actions__icon-wrap {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 8px;
    }

    .ui-detail-ctx-actions__btn:not(.ui-detail-ctx-actions__btn--danger) .ui-detail-ctx-actions__icon-wrap {
        color: #606060;
        background: #f6f6f6;
    }

    .ui-detail-ctx-actions__btn--danger .ui-detail-ctx-actions__icon-wrap {
        background: rgb(209 60 60 / 12%);
    }

    .ui-detail-ctx-actions__icon {
        display: block;
        width: 14px;
        height: 14px;
    }

    .ui-detail-ctx-actions__label {
        flex: 1;
        min-width: 0;
    }

    .ui-detail-ctx-cancel {
        width: 100%;
        padding: 14px 16px;
        font-family: inherit;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.2;
        color: #2b2b2b;
        text-align: center;
        cursor: pointer;
        background: #fff;
        border: none;
        border-radius: 14px;
        box-shadow: 0 1px 0 rgb(0 0 0 / 6%);
        transition: background-color 0.12s ease;
    }

    .ui-detail-ctx-cancel:active {
        background: #ededed;
    }

    .ui-detail-ctx-enter-active {
        animation: ui-detail-ctx-fade-in 0.2s ease-out;
    }

    .ui-detail-ctx-leave-active {
        animation: ui-detail-ctx-fade-out 0.16s ease-in forwards;
    }

    @keyframes ui-detail-ctx-fade-in {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes ui-detail-ctx-fade-out {
        to {
            opacity: 0;
        }
    }

    .ui-detail-ctx-enter-active .ui-detail-ctx-sheet {
        animation: ui-detail-ctx-sheet-in 0.22s ease-out;
    }

    @keyframes ui-detail-ctx-sheet-in {
        from {
            transform: translateY(28px);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
</style>
