<template>
    <div class="flex-1 w-full py-1">
        <div class="w-full mx-auto">
            <RadioGroup
                ref="accountType"
                v-model="selected"
                class="w-full"
                name="type"
            >
                <RadioGroupLabel class="sr-only">Account Type</RadioGroupLabel>
                <div class="w-full space-y-3">
                    <RadioGroupOption
                        v-for="plan in types"
                        :key="plan.name"
                        v-slot="{ active, checked }"
                        :value="plan.value"
                        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"
                            >
                                <div class="flex items-center gap-2">
                                    <div
                                        class="w-[90px] h-[90px] flex items-center justify-center"
                                    >
                                        <img
                                            :alt="plan.name"
                                            :class="
                                                checked
                                                    ? ''
                                                    : 'filter grayscale'
                                            "
                                            :src="plan.image"
                                            class="object-cover transition-all no-magnify"
                                        />
                                    </div>
                                    <div class="text-sm">
                                        <RadioGroupLabel
                                            :class="
                                                checked
                                                    ? 'text-white'
                                                    : 'text-blue-300'
                                            "
                                            as="p"
                                            class="text-2xl font-semibold"
                                        >
                                            {{ $t(plan.name) }}
                                        </RadioGroupLabel>
                                        <RadioGroupDescription
                                            as="span"
                                            class="inline text-sm font-medium text-gray-200"
                                        >
                                            <span>
                                                {{ $t(plan.description) }}</span
                                            >
                                        </RadioGroupDescription>
                                    </div>
                                </div>
                                <div
                                    :class="
                                        checked
                                            ? 'opacity-100 text-blue-300'
                                            : 'opacity-0 text-white'
                                    "
                                    class="flex items-center justify-center w-8 h-8 transition-all bg-white rounded-full shrink-0"
                                >
                                    <svg
                                        fill="none"
                                        height="11"
                                        viewBox="0 0 14 11"
                                        width="14"
                                        xmlns="http://www.w3.org/2000/svg"
                                    >
                                        <path
                                            clip-rule="evenodd"
                                            d="M13.7069 0.793031C13.8944 0.980558 13.9997 1.23487 13.9997 1.50003C13.9997 1.76519 13.8944 2.0195 13.7069 2.20703L5.70692 10.207C5.51939 10.3945 5.26508 10.4998 4.99992 10.4998C4.73475 10.4998 4.48045 10.3945 4.29292 10.207L0.292919 6.20703C0.110761 6.01843 0.00996641 5.76583 0.0122448 5.50363C0.0145233 5.24143 0.119692 4.99062 0.3051 4.80521C0.490508 4.6198 0.741321 4.51464 1.00352 4.51236C1.26571 4.51008 1.51832 4.61087 1.70692 4.79303L4.99992 8.08603L12.2929 0.793031C12.4804 0.60556 12.7348 0.500244 12.9999 0.500244C13.2651 0.500244 13.5194 0.60556 13.7069 0.793031Z"
                                            fill="#29419B"
                                            fill-rule="evenodd"
                                        />
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </RadioGroupOption>
                </div>
            </RadioGroup>
        </div>
    </div>
</template>

<script setup>
import { defineEmits, ref, watch } from "vue";
import { messages } from "../assets/locales/l180loca";
import { useI18n } from "vue-i18n";

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

const emit = defineEmits(["changed"]);

const types = [
    {
        name: "Register.name_clinet",
        description: "Register.ditels_clent",
        image: "https://muhandisin.s3.eu-central-1.amazonaws.com/assets/images/client.png",
        value: "client",
    },
    {
        name: "Register.name_eng",
        description: "Register.ditels_eng",
        image: "https://muhandisin.s3.eu-central-1.amazonaws.com/assets/images/engineer.png",
        value: "engineer",
    },
    {
        name: "Register.name_firm",
        description: "Register.ditels_firm",
        image: "https://muhandisin.s3.eu-central-1.amazonaws.com/assets/images/firm.png",
        value: "firm",
    },
];

const selected = ref(null);

watch(selected, (value) => {
    emit("changed", JSON.parse(JSON.stringify(value)));
});
</script>
