<script lang="ts" setup>
import _ from 'lodash'
import { ref } from 'vue'
import fakers from '@/utils/faker'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Input } from '@/components/ui/input'
import { Box } from '@/components/ui/box'
import {
  MenuRoot,
  MenuTrigger,
  MenuPositioner,
  MenuContent,
  MenuCheckboxItem,
} from '@/components/ui/menu'
import {
  Table,
  TableHeader,
  TableBody,
  TableHead,
  TableRow,
  TableCell,
} from '@/components/ui/table'

import { AvatarRoot, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import {
  CarouselRoot,
  CarouselPrevTrigger,
  CarouselNextTrigger,
  CarouselItemGroup,
  CarouselItem,
} from '@/components/ui/carousel'
import {
  DatePickerRoot,
  DatePickerControl,
  DatePickerInput,
  DatePickerTrigger,
  DatePickerPositioner,
  DatePickerContent,
  DatePickerYearSelect,
  DatePickerMonthSelect,
  DatePickerView,
  DatePickerViewControl,
  DatePickerPrevTrigger,
  DatePickerNextTrigger,
  DatePickerRangeText,
  DatePickerTable,
  DatePickerTableHead,
  DatePickerTableRow,
  DatePickerTableHeader,
  DatePickerTableBody,
  DatePickerTableCell,
  DatePickerTableCellTrigger,
  DatePickerContext,
} from '@/components/ui/datepicker'
import {
  PaginationContext,
  PaginationRoot,
  PaginationItem,
  PaginationPrevTrigger,
  PaginationNextTrigger,
  PaginationEllipsis,
} from '@/components/ui/pagination'
import { Map } from '@/components/ui/map'
import { Lucide } from '@/components/ui/lucide'
import { Line1, Line2, Pie1, Donut1, Donut2 } from '@/components/chart-presets'

const pc = ref(false)
const electronic = ref(false)
const smartphone = ref(false)
const photography = ref(false)
const sport = ref(false)
</script>

<template>
  <!-- BEGIN: Daily Notes -->
  <CarouselRoot :default-page="0" :slide-count="4">
    <div class="flex h-10 items-center">
      <h2 class="me-auto truncate text-lg font-medium">Daily Notes</h2>
      <CarouselPrevTrigger as-child>
        <Box as-child>
          <Button variant="ghost" class="box me-2 px-2">
            <Lucide icon="ChevronLeft" />
          </Button>
        </Box>
      </CarouselPrevTrigger>
      <CarouselNextTrigger as-child>
        <Box as-child>
          <Button variant="ghost" class="box px-2">
            <Lucide icon="ChevronRight" />
          </Button>
        </Box>
      </CarouselNextTrigger>
    </div>
    <div class="mt-5">
      <Box>
        <CarouselItemGroup>
          <CarouselItem as-child v-for="(faker, fakerKey) in _.take(fakers, 4)" :key="fakerKey" :index="fakerKey">
            <div>
              <div class="truncate text-base font-medium">
                {{ faker['news'][0]!['title'] }}
              </div>
              <div class="mt-2 text-xs opacity-50">Posted 20 Hours ago</div>
              <div class="mt-2 text-justify opacity-70 line-clamp-3">
                {{ faker['news'][0]!['shortContent'] }}
              </div>
              <div class="mt-5 flex font-medium">
                <Button variant="ghost" type="button" size="sm" class="border border-foreground/20">
                  View Notes
                </Button>
                <Button variant="ghost" class="ms-auto border border-foreground/20" type="button" size="sm">
                  Dismiss
                </Button>
              </div>
            </div>
          </CarouselItem>
        </CarouselItemGroup>
      </Box>
    </div>
  </CarouselRoot>
  <!-- END: Daily Notes -->
</template>
