<template>
    <div class="flex-1 w-full py-1">
        <label
            v-if="label"
            class="block mb-1 text-xs font-semibold text-gray-300"
            >{{ label }}</label
        >
        <div class="w-full mx-auto">
            <RadioGroup
                :ref="name"
                v-model="internalSelected"
                :name="name"
                class="w-full"
            >
                <RadioGroupLabel class="sr-only"
                    >{{ label || name }}
                </RadioGroupLabel>
                <div class="grid w-full gap-5" :class="cols">
                    <RadioGroupOption
                        v-for="item in items"
                        :key="item[idBy]"
                        v-slot="{ active, checked }"
                        :value="item[idBy]"
                        as="template"
                        class="w-full select-none"
                    >
                        <div
                            :class="[
                                active ? '' : '',
                                checked ? 'bg-blue-300' : 'bg-white ',
                            ]"
                            class="relative flex w-full px-5 py-4 !cursor-pointer rounded-2xl ring-2 ring-blue-200 focus:outline-none"
                        >
                            <div
                                class="flex items-center justify-between w-full gap-2"
                            >
                                <div class="flex items-center gap-2">
                                    <div class="text-sm">
                                        <RadioGroupLabel
                                            :class="
                                                checked
                                                    ? 'text-white'
                                                    : 'text-gray-300'
                                            "
                                            as="p"
                                            class="text-sm font-medium"
                                        >
                                            {{ item[nameBy] }}
                                        </RadioGroupLabel>
                                        <RadioGroupDescription
                                            as="span"
                                            class="inline text-xs font-medium text-gray-200"
                                        >
                                            <span>
                                                {{ item[descriptionBy] }}</span
                                            >
                                        </RadioGroupDescription>
                                    </div>
                                </div>
                                <div
                                    :class="
                                        checked
                                            ? ' text-blue-300'
                                            : ' text-blue-200'
                                    "
                                    class="flex items-center justify-center w-5 h-5 transition-all bg-blue-100 rounded-full shrink-0"
                                >
                                    <svg
                                        class=""
                                        fill="none"
                                        height="7"
                                        viewBox="0 0 10 7"
                                        width="10"
                                        xmlns="http://www.w3.org/2000/svg"
                                    >
                                        <path
                                            clip-rule="evenodd"
                                            d="M9.6947 0.205073C9.82593 0.336342 9.89965 0.514358 9.89965 0.699973C9.89965 0.885587 9.82593 1.0636 9.6947 1.19487L4.0947 6.79487C3.96343 6.9261 3.78541 6.99982 3.5998 6.99982C3.41418 6.99982 3.23617 6.9261 3.1049 6.79487L0.304897 3.99487C0.177386 3.86285 0.10683 3.68603 0.108425 3.50249C0.11002 3.31895 0.183638 3.14339 0.313424 3.0136C0.443209 2.88381 0.618778 2.8102 0.802316 2.8086C0.985853 2.80701 1.16268 2.87756 1.2947 3.00507L3.5998 5.31017L8.7049 0.205073C8.83617 0.0738429 9.01418 0.00012207 9.1998 0.00012207C9.38541 0.00012207 9.56343 0.0738429 9.6947 0.205073Z"
                                            fill="currentColor"
                                            fill-rule="evenodd"
                                        />
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </RadioGroupOption>
                </div>
            </RadioGroup>
            <FormKit
                v-model="selected"
                :name="`hidden_${name}`"
                required
                type="hidden"
                validation="required"
            />
        </div>
    </div>
</template>

<script setup>
import { defineEmits, ref, watch } from "vue";

import {
    RadioGroup,
    RadioGroupDescription,
    RadioGroupLabel,
    RadioGroupOption,
} from "@headlessui/vue";

const emit = defineEmits(["update:selected"]);

const props = defineProps({
    items: {
        type: Array,
        required: true,
    },
    name: {
        type: String,
        default: "radio",
    },
    selected: {
        type: String,
        default: null,
    },
    label: {
        type: String,
        default: null,
    },
    idBy: {
        type: String,
        default: "id",
    },
    nameBy: {
        type: String,
        default: "name_en",
    },
    descriptionBy: {
        type: String,
        default: "sub_en",
    },
    cols: {
        type: String,
        default: "grid-cols-1 lg:grid-cols-3",
    },
});

const internalSelected = ref(props.selected || null);

watch(internalSelected, (selected) => {
    emit("update:selected", JSON.parse(JSON.stringify(selected)));
});

watch(props.selected, (selected) => {
    internalSelected = selected;
});
</script>
