"use client";

import AutoScroll from "embla-carousel-auto-scroll";
import React from "react";

import { Button } from "@/components/ui/button";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
} from "@/components/ui/carousel";
import { cn } from "@/lib/utils";

const bgPattern = {
  backgroundImage:
    "linear-gradient(135deg, var(--muted) 25%, transparent 25.5%, transparent 50%, var(--muted) 50.5%, var(--muted) 75%, transparent 75.5%, transparent)",
  backgroundSize: "10px 10px",
};

interface Logos11Props {
  className?: string;
}

const Logos11 = ({ className }: Logos11Props) => {
  const logos = [
    {
      id: "logo-1",
      description: "لوگوی ۱",
      image:
        "/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
      className: "h-7 w-auto",
    },
    {
      id: "logo-2",
      fill: true,
      description: "لوگوی ۲",
      image:
        "/block-media/shadcnblocks/block/guri3/arc-white.svg",
      className: "h-7 w-auto",
    },
    {
      id: "logo-3",
      description: "لوگوی ۳",
      image:
        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
      className: "h-7 w-auto",
    },
    {
      id: "logo-4",
      description: "لوگوی ۴",
      image:
        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
      className: "h-7 w-auto",
    },
    {
      id: "logo-5",
      description: "لوگوی ۵",
      image:
        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
      className: "h-7 w-auto",
    },
    {
      id: "logo-6",
      description: "لوگوی ۶",
      image:
        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-5.svg",
      className: "h-5 w-auto",
    },
    {
      id: "logo-7",
      description: "لوگوی ۷",
      image:
        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-6.svg",
      className: "h-7 w-auto",
    },
    {
      id: "logo-8",
      description: "لوگوی ۸",
      image:
        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-7.svg",
      className: "h-7 w-auto",
    },
  ];

  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("relative grid w-screen overflow-hidden py-32", className)}
    >
      <div className="relative z-10 container h-full items-center justify-center gap-6">
        <div className="relative flex h-20 w-full items-center justify-center border border-x-0">
          <h1 className="text-3xl font-medium tracking-tighter md:text-xl">
            با حمایت بهترین‌ها
          </h1>
          <BgPattern />
        </div>
        <div className="w-full py-20">
          <Carousel
            opts={{ loop: true, align: "start", direction: "rtl" }}
            plugins={[AutoScroll({ playOnInit: true })]}
          >
            <CarouselContent className="ms-0">
              {logos.map((logo) => (
                <CarouselItem
                  key={logo.id}
                  className={cn(
                    "relative flex h-35 basis-1/2 justify-center border border-t-0 border-e-0 border-border ps-0 sm:basis-1/4 md:basis-1/3 lg:basis-1/6",
                    logo.fill && "bg-orange-500",
                  )}
                >
                  <div className="flex flex-col items-center justify-center lg:mx-10">
                    <img
                      src={logo.image}
                      alt={logo.description}
                      className={logo.className}
                    />
                  </div>
                </CarouselItem>
              ))}
            </CarouselContent>
          </Carousel>
          <Carousel
            opts={{ loop: true, align: "end", direction: "rtl" }}
            plugins={[AutoScroll({ playOnInit: true })]}
          >
            <CarouselContent className="ms-0">
              {logos.map((logo) => (
                <CarouselItem
                  key={logo.id}
                  className={cn(
                    "relative flex h-35 basis-1/2 justify-center border border-t-0 border-e-0 border-b-0 border-border ps-0 sm:basis-1/4 md:basis-1/3 lg:basis-1/6",
                    logo.fill && "bg-orange-500",
                  )}
                >
                  <div className="flex flex-col items-center justify-center lg:mx-10">
                    <img
                      src={logo.image}
                      alt={logo.description}
                      className={logo.className}
                    />
                  </div>
                </CarouselItem>
              ))}
            </CarouselContent>
          </Carousel>
        </div>
        <div className="relative flex h-20 w-full items-center justify-center border border-x-0">
          <Button className="h-12 rounded-none px-8!">همین الان شروع کنید</Button>
          <Button
            variant="ghost"
            className="flex h-12 items-center gap-3 rounded-none px-8!"
          >
            نحوه کار
            <PlayIcon className="rtl:rotate-180" />
          </Button>
          <BgPattern sideLines={false} />
        </div>
      </div>
    </section>
  );
};

export { Logos11 };

const PlayIcon = ({ className }: { className?: string }) => {
  return (
    <svg
      width="15"
      height="18"
      viewBox="0 0 15 18"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
    >
      <path
        d="M1.11523 3.94458C1.11523 2.36225 2.86573 1.40657 4.19675 2.26222L12.4982 7.59889C13.7229 8.38617 13.7229 10.1763 12.4982 10.9636L4.19675 16.3003C2.86573 17.1559 1.11523 16.2003 1.11523 14.6179V3.94458Z"
        fill="black"
        stroke="black"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
};

const BgPattern = ({ sideLines = true }: { sideLines?: boolean }) => {
  return (
    <>
      {/* bg pattern left */}
      <div
        className="absolute top-1/2 left-0 z-20 size-20 -translate-x-full -translate-y-1/2 border border-e-0"
        style={bgPattern}
      >
        <span className="absolute -top-1 -end-1 z-20 size-2 bg-foreground" />
        <span className="absolute -end-1 -bottom-1 z-20 size-2 bg-foreground" />
        <span className="absolute -bottom-1 -start-1 z-20 size-2 bg-foreground" />
        <span className="absolute -top-1 -start-1 z-20 size-2 bg-foreground" />
      </div>

      {/* bg pattern right */}
      <div
        className="absolute top-1/2 right-0 z-20 size-20 translate-x-full -translate-y-1/2 border border-s-0"
        style={bgPattern}
      >
        <span className="absolute -top-1 -end-1 z-20 size-2 bg-foreground" />
        <span className="absolute -end-1 -bottom-1 z-20 size-2 bg-foreground" />
        <span className="absolute -bottom-1 -start-1 z-20 size-2 bg-foreground" />
        <span className="absolute -top-1 -start-1 z-20 size-2 bg-foreground" />
      </div>

      {/* bg Lines left */}
      {sideLines && (
        <div className="absolute left-0 z-10 h-[200vh] w-px border-s" />
      )}
      {sideLines && (
        <div className="absolute -left-20 z-10 h-[200vh] w-px border-s" />
      )}

      {/* bg Lines right */}
      {sideLines && (
        <div className="absolute right-0 z-10 h-[200vh] w-px border-s" />
      )}
      {sideLines && (
        <div className="absolute -right-20 z-10 h-[200vh] w-px border-s" />
      )}
    </>
  );
};