<template>
    <div class="mt-12">
        <!-- users -->
        <div class=" mt-4">
            <div v-for="user in idea.data.users" :key="user.id" class="flex items-center justify-between p-2">
                <UserProfile :user="user" />
                <label dir="ltr" class="inline-flex items-center cursor-pointer">
                    <input type="checkbox" v-model="user.active" @change="filter_users(user)" class="sr-only peer">
                    <div
                        class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600 dark:peer-checked:bg-blue-600">
                    </div>
                </label>
            </div>
        </div>
        <!-- filter -->
        <div class="flex space-x-3 p-2">
            <div class="flex items-center">
                <input checked id="checked-checkbox" type="checkbox" v-model="filters.relateds" @change="filter_relateds"
                    class="w-4 h-4 text-blue-600 bg-zinc-100 border-zinc-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-zinc-800 focus:ring-2 dark:bg-zinc-700 dark:border-zinc-600">
                <label for="checked-checkbox"
                    class="ms-1 text-sm font-medium text-zinc-900 dark:text-zinc-300">مرتبط‌ها</label>
            </div>
            <div class="flex items-center">
                <input checked id="checked-checkbox" type="checkbox" v-model="filters.pendings" @change="filter_pendings"
                    class="w-4 h-4 text-blue-600 bg-zinc-100 border-zinc-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-zinc-800 focus:ring-2 dark:bg-zinc-700 dark:border-zinc-600">
                <label for="checked-checkbox"
                    class="ms-1 text-sm font-medium text-zinc-900 dark:text-zinc-300">درحال‌بررسی‌ها</label>
            </div>
            <div class="flex items-center">
                <input checked id="checked-checkbox" type="checkbox" v-model="filters.unrelateds" @change="filter_unrelateds"
                    class="w-4 h-4 text-blue-600 bg-zinc-100 border-zinc-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-zinc-800 focus:ring-2 dark:bg-zinc-700 dark:border-zinc-600">
                <label for="checked-checkbox"
                    class="ms-1 text-sm font-medium text-zinc-900 dark:text-zinc-300">نامرتبط‌ها</label>
            </div>
        </div>
        <!-- add -->
        <div class="mt-4">
            <div v-if="store.idea.is_member"
                class="flex text-zinc-800 dark:text-zinc-100 justify-center items-center space-x-3">
                <NuxtLink :to="useRuntimeConfig().public.router.IdeaAddSection" class="">
                    <IconBook class="size-7" />
                </NuxtLink>
                <NuxtLink :to="useRuntimeConfig().public.router.IdeaAddPaper" class="">
                    <IconPaper class="size-7" />
                </NuxtLink>
                <NuxtLink :to="useRuntimeConfig().public.router.IdeaAddCode" class="">
                    <IconCode class="size-7" />
                </NuxtLink>
                <NuxtLink :to="useRuntimeConfig().public.router.IdeaAddKeyword" class="">
                    <IconKeyword class="size-7" />
                </NuxtLink>
                <NuxtLink :to="useRuntimeConfig().public.router.IdeaAddKeyword" class="">
                    <IconWeb class="size-7" />
                </NuxtLink>
                <NuxtLink :to="useRuntimeConfig().public.router.IdeaAddKeyword" class="">
                    <IconChatgpt class="size-9" />
                </NuxtLink>
            </div>
            <button v-else type="button"
                class="inline-flex items-center px-4 pt-1 pb-1.5 text-xs font-medium text-zinc-900 bg-white border border-zinc-200 rounded-lg hover:bg-zinc-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:outline-none focus:ring-zinc-100 focus:text-blue-700 dark:bg-zinc-800 dark:text-zinc-400 dark:border-zinc-600 dark:hover:text-white dark:hover:bg-zinc-700 dark:focus:ring-zinc-700"><svg
                    class="w-3.5 h-3.5 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                    viewBox="0 0 20 20">
                    <path
                        d="M14.707 7.793a1 1 0 0 0-1.414 0L11 10.086V1.5a1 1 0 0 0-2 0v8.586L6.707 7.793a1 1 0 1 0-1.414 1.414l4 4a1 1 0 0 0 1.416 0l4-4a1 1 0 0 0-.002-1.414Z" />
                    <path
                        d="M18 12h-2.55l-2.975 2.975a3.5 3.5 0 0 1-4.95 0L4.55 12H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2Zm-3 5a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z" />
                </svg>درخواست عضویت
            </button>
        </div>
        <!-- steps -->
        <ol class="relative border-s ms-4 border-zinc-200 dark:border-zinc-700 mt-4">
            <li v-for="step in idea.steps" :key="step.id">
                <IdeaStepKeyword v-if="step.target.type == 'keyword'" :instance="step" />
                <IdeaStepSection v-if="step.target.type == 'section'" :instance="step" />
                <IdeaStepCode v-if="step.target.type == 'code'" :instance="step" />
                <IdeaStepPaper v-if="step.target.type == 'paper'" :instance="step" />
            </li>
        </ol>
    </div>
</template>

<script setup>
import axios from 'axios';
import { useMaghaleStore } from '~/store';
const store = useMaghaleStore()
const id = store.idea.id
// get idea
const idea = reactive({ steps: [], data: {} })
async function getIdea() {
    let url = useRuntimeConfig().public.BaseUrl + 'ideas/'
    store.isAuthenticated ? url = url + 'get_timeline_by_user/' : url = url + 'get_timeline/'
    axios.get(url + store.idea.id)
        .then((r) => {
            idea.data = r.data
            store.setIsMember(r.data.is_member)
        })
}
async function getSteps() {
    let url = useRuntimeConfig().public.BaseUrl + 'ideas/'
    store.isAuthenticated ? url = url + 'idea_steps_by_user/' : url = url + 'idea_steps/'
    axios.get(`${url}?pk=${id}`)
        .then((r) => {
            idea.steps = idea.steps.concat(r.data.results)
            // filter_users()
        })
}
// init
getSteps()
store.isAuthenticated ? getIdea() : 0
// functions
const filters = {
    unrelateds: false,
    relateds: true,
    pendings: false,
}
function filter_users(user) {
    const instances = idea.steps.filter(x => x.user.id == user.id)
    if (user.active) {
        for (const element of instances) {
            element.active = true
        }
    } else {
        for (const element of instances) {
            element.active = false
        }
    }
}
function filter_pendings() {
    const instances = idea.steps.filter(x => x.status == 1)
    if (filters.pendings) {
        for (const element of instances) {
            element.active = true
        }
    } else {
        for (const element of instances) {
            element.active = false
        }
    }
}
function filter_relateds() {
    const instances = idea.steps.filter(x => x.status == 2)
    if (filters.relateds) {
        for (const element of instances) {
            element.active = true
        }
    } else {
        for (const element of instances) {
            element.active = false
        }
    }
}
function filter_unrelateds() {
    const instances = idea.steps.filter(x => x.status == 3)
    if (filters.unrelateds) {
        for (const element of instances) {
            element.active = true
        }
    } else {
        for (const element of instances) {
            element.active = false
        }
    }
}
</script>