mediahub-fe/app/[locale]/(public)/video/detail/[slug]/page.tsx

"use client";
import { Card, CardContent } from "@/components/ui/card";
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Textarea } from "@/components/ui/textarea";
import Link from "next/link";
import { useParams, usePathname, useRouter } from "next/navigation";
import React, { useEffect, useState } from "react";
import { Icon } from "@iconify/react/dist/iconify.js";
import { textEllipsis } from "@/utils/globals";
import { getDetail } from "@/service/landing/landing";
import VideoPlayer from "@/utils/video-player";
import NewContent from "@/components/landing-page/new-content";

const dummyImageContent = [
  { id: 1, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
  { id: 2, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
  { id: 3, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
  { id: 4, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
  { id: 5, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
  { id: 6, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
  { id: 7, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
  { id: 8, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
  { id: 9, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
];

const dummyDescription = [
  { id: 1, title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
  { id: 2, title: "Kapolres Lahat Himbau Cipta Kondisi Cooling System Pasca Pemungutan Suara Pilkada 2024", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
  { id: 3, title: "17 Ton Pupuk Bersubsidi yang Akan Diselewengkan ke Banyuasin Berhasil Digagalkan", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
  { id: 4, title: "Kapolda Sumsel Apelkan 1471 Personel Persiapan Pengamanan Pengawalan Tahan Pungut dan Hitung Suara", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
  { id: 5, title: "Polrestabes Palembang Berhasil Mengungkap Kasus Penganiayaan Berat di Ilir Barat II", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
  { id: 6, title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
];

const DetailVideo = () => {
  const [selectedSize, setSelectedSize] = useState<string>("L");
  const [selectedTab, setSelectedTab] = useState("video");
  const router = useRouter();
  const pathname = usePathname();
  const params = useParams();
  const slug = params?.slug;
  const [detailDataVideo, setDetailDataVideo] = useState<any>();

  useEffect(() => {
    initFetch();
  }, []);

  const initFetch = async () => {
    const response = await getDetail(String(slug));
    console.log("detailVideo", response);
    setDetailDataVideo(response?.data?.data);
  };

  const sizes = [
    { label: "XL", value: "3198 x 1798 px" },
    { label: "L", value: "2399 x 1349 px" },
    { label: "M", value: "1599 x 899 px" },
    { label: "S", value: "1066 x 599 px" },
    { label: "XS", value: "800 x 450 px" },
  ];

  return (
    <div className="min-h-screen px-4 md:px-24 py-4">
      {/* Container Utama */}
      <div className="rounded-md overflow-hidden md:flex">
        {/* Bagian Kiri */}
        <div className="md:w-3/4">
          {/* Gambar Utama */}
          <div className="relative">
            <VideoPlayer url={detailDataVideo?.files[0]?.url} />
            <div className="absolute top-4 left-4"></div>
          </div>
        </div>

        {/* Bagian Kanan */}
        <div className="md:w-1/4 p-4 bg-gray-300  rounded-lg mx-4">
          <div className="flex flex-col mb-3 items-center justify-center cursor-pointer">
            <svg xmlns="http://www.w3.org/2000/svg" width="2.5em" height="2.5em" viewBox="0 0 24 24">
              <path fill="black" d="m17 18l-5-2.18L7 18V5h10m0-2H7a2 2 0 0 0-2 2v16l7-3l7 3V5a2 2 0 0 0-2-2" />
            </svg>
            <p className="text-base lg:text-lg">Simpan</p>
          </div>
          {/* garis */}
          <div className="border-t border-black my-4"></div>

          <Link href="" className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded">
            {detailDataVideo?.category?.name}
          </Link>

          <div className="flex justify-center flex-wrap gap-2 mb-4">
            <p className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500">poldajabar</p>
            <p className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500">pilkadamai2024</p>
          </div>

          <div className="border-t border-black my-4"></div>

          {/* Opsi Ukuran Foto */}
          <h4 className="flex text-lg justify-center items-center font-semibold my-3">Opsi Ukuran Foto</h4>

          <div className="border-t border-black my-4"></div>

          <div className="space-y-2">
            {sizes.map((size) => (
              <label key={size.label} className="flex items-center space-x-2 cursor-pointer">
                <input type="radio" name="size" value={size.label} checked={selectedSize === size.label} onChange={() => setSelectedSize(size.label)} className="text-red-600 focus:ring-red-600" />
                <div className="text-sm">
                  {size.label} ---------------------------------------- {size.value}
                </div>
              </label>
            ))}
          </div>

          {/* Download Semua */}
          <div className="mt-4">
            <label className="flex items-center space-x-2 text-sm">
              <input type="checkbox" className="text-red-600 focus:ring-red-600" />
              <span>Download Semua File?</span>
            </label>
          </div>

          {/* Tombol Download */}
          <button className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700">
            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
              <path fill="white" d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z" />
            </svg>
            Download
          </button>
        </div>
      </div>

      {/* Footer Informasi */}
      <div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
        <p className="items-end">
          oleh <span className="font-semibold text-black">{detailDataVideo?.uploadedBy?.userLevel?.name}</span> | Diupdate pada {detailDataVideo?.updatedAt} WIB | <Icon icon="formkit:eye" width="15" height="15" />{" "}
          {detailDataVideo?.clickCount}
        </p>
        <p>Kreator: {detailDataVideo?.creatorName}</p>
      </div>

      {/* Keterangan */}
      <div className="md:w-3/4">
        <h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{detailDataVideo?.title}</h1>
        <div dangerouslySetInnerHTML={{ __html: detailDataVideo?.htmlDescription }} />
      </div>

      {/* Comment */}
      <div className="flex flex-col my-16 gap-5 p-10 bg-gray-300">
        <p className="flex items-start text-lg">Berikan Komentar</p>
        <Textarea placeholder="Type your comments here." className="flex items-start justify-center" />
        <button className="flex items-start bg-[#bb3523] rounded-lg w-fit px-4 py-1">Kirim</button>
      </div>

      {/* Konten Serupa */}
      <div className="px-4">
        <NewContent type={"similar"} />
      </div>
    </div>
  );
};

export default DetailVideo;