<!-- Checkboxes component -->
<script setup lang="ts">
import type { OptionType } from '~src/admin/types';

// Props with default values
const {
    options,
    name,
    selection = 'multiple',
    type = 'icon',
    size = 'default',
    align = 'horizontal',
    globalDisabled = false,
} = defineProps<{
    options: OptionType[];
    name: string;
    selection?: 'single' | 'multiple';
    type?: 'icon' | 'border' | 'button';
    size?: 'default' | 'large' | 'small';
    align?: 'horizontal' | 'vertical';
    globalDisabled?: boolean;
}>();

// Generate id
const generateID = (name: string, index: number) => {
    return `${name}-${index}`;
};

// Values
const values = defineModel<string[] | string>();
</script>

<template>
    <div :class="`checkbox-wrapper type-${type} align-${align}`">
        <div :class="`checkbox-item size-${size}`" v-for="(option, i) in options" :key="i">
            <label :for="generateID(name, Number(i))" v-if="option.label.length || option.value.length">
                <input
                    :type="selection === 'single' ? 'radio' : 'checkbox'"
                    :name
                    :id="generateID(name, Number(i))"
                    :value="option.value"
                    :disabled="option?.disabled || globalDisabled"
                    v-model="values"
                />
                {{ option.label }}
            </label>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.checkbox-wrapper {
    @apply flex justify-center flex-wrap;

    &.align-vertical {
        @apply flex-col;
    }

    &.type-icon {
        @apply gap-6;

        .checkbox-item {
            @apply flex items-center gap-2;

            &.size-small {
                @apply text-xs leading-xs;
            }
        }
    }

    &.type-border {
        @apply max-sm:max-w-[220px] max-sm:mx-auto gap-2.5;

        .checkbox-item {
            @apply max-sm:w-full max-w-[100%] sm:max-w-[140px] sm:flex-1 border bg-white border-neutral-500 rounded-lg;

            label {
                @apply px-3 py-1.5;
            }

            &.size-small {
                @apply text-xs leading-xs;

                label {
                    @apply px-2 py-0.5;
                }
            }

            &.size-large {
                label {
                    @apply px-4 py-2;
                }
            }

            &:has(:disabled) {
                @apply border-neutral-500;
            }

            &:has(:checked) {
                @apply border-primary-500;
            }
        }
    }

    &.type-button {
        @apply border border-neutral-500 rounded;

        .checkbox-item {
            @apply flex items-center gap-2 border-r border-r-neutral-500;

            label {
                @apply px-4 py-1.5;
            }

            &.size-small {
                @apply text-xs leading-xs;

                label {
                    @apply px-3 py-0.5;
                }
            }

            &.size-large {
                label {
                    @apply px-4 py-2;
                }
            }

            &:first-child {
                @apply rounded-l;
            }

            &:last-child {
                @apply border-r-0 rounded-r;
            }

            &:has(:checked) {
                @apply bg-primary-500;

                label {
                    @apply text-white;
                }
            }

            &:has(:disabled) {
                @apply bg-neutral-100;

                label {
                    @apply text-base-200;
                }
            }

            input {
                @apply hidden;
            }
        }
    }

    .checkbox-item {
        label {
            @apply flex items-center gap-2;
        }
    }

    input {
        @apply cursor-pointer min-w-[unset] w-[14px] h-[14px] border border-neutral-500 appearance-none m-0 bg-white transition-colors hover:border-primary-500 shadow-none;

        &[type='checkbox'] {
            @apply rounded-sm;

            &:checked {
                background-size: 10px 10px;
                background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik0yLjU0MzUgNC45OTk5OUMyLjI1MDYxIDQuNzA3MSAxLjc3NTc0IDQuNzA3MSAxLjQ4Mjg0IDQuOTk5OTlDMS4xODk5NSA1LjI5Mjg5IDEuMTg5OTUgNS43Njc3NiAxLjQ4Mjg0IDYuMDYwNjVMMi42NDk1NyA3LjIyNzM4QzMuMDQ1NTkgNy42MjM0IDMuMjQzNiA3LjgyMTQgMy40NzE5MiA3Ljg5NTU5QzMuNjcyNzcgNy45NjA4NSAzLjg4OTEyIDcuOTYwODUgNC4wODk5NiA3Ljg5NTU5QzQuMzE4MjkgNy44MjE0IDQuNTE2MyA3LjYyMzQgNC45MTIzMSA3LjIyNzM4TDguOTA3NDcgMy4yMzIyM0M5LjIwMDM2IDIuOTM5MzMgOS4yMDAzNiAyLjQ2NDQ2IDguOTA3NDcgMi4xNzE1N0M4LjYxNDU3IDEuODc4NjcgOC4xMzk3IDEuODc4NjcgNy44NDY4MSAyLjE3MTU3TDMuNzgwOTQgNi4yMzc0M0wyLjU0MzUgNC45OTk5OVoiIGZpbGw9IndoaXRlIi8+DQo8L3N2Zz4NCg==');
            }
        }

        &[type='radio'] {
            @apply rounded-full;

            &:checked {
                @apply bg-primary-500;
            }
        }

        &:checked {
            @apply bg-primary-500 border-primary-500;

            &::before {
                @apply hidden;
            }
        }

        &:disabled {
            @apply bg-neutral-50 border-neutral-500 cursor-default pointer-events-none;

            &:checked {
                @apply bg-primary-200 text-primary-200 border-primary-200;
            }
        }
    }

    label {
        @apply cursor-pointer font-medium;

        &:has(:checked) {
            @apply text-primary-500;
        }

        &:has(:disabled) {
            @apply text-base-200 cursor-default pointer-events-none;
        }

        &:has(:disabled:checked) {
            @apply text-primary-200;
        }
    }
}
</style>
