"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import Image from "next/image";
import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row";
import Container from "react-bootstrap/Container";
import { projects } from "./Projects";
import styles from "./Portfolio.module.css";

interface ProjectItem {
  img: string;
  title: string;
  url: string;
}

interface PortfolioProps {
  showAll?: boolean;
  random?: boolean;
}

const CaseStudy = ({
  showAll = false,
  random = false,
}: PortfolioProps) => {
  const allProjects: ProjectItem[] = [
    ...projects.magento2,
    ...projects.shopify,
    ...projects.woocommerce,
  ];

  const [randomProjects, setRandomProjects] = useState<ProjectItem[]>([]);

  useEffect(() => {
    if (random) {
      const shuffled = [...allProjects]
        .sort(() => Math.random() - 0.5)
        .slice(0, 6);

      setRandomProjects(shuffled);
    }
  }, [random]);

  // ===========================
  // Home page random projects
  // ===========================
  if (random) {
    return (
      <Container>
        <Row className="d-flex flex-wrap">
          {randomProjects.map((item) => (
            <Col lg={4} md={4} sm={6} key={item.url}>
              <div className={styles.singleProjectsBox}>
                <Link
                  href={item.url}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <div className={styles.image}>
                    <Image
                      src={item.img}
                      alt={`Screenshot of the ${item.title} website`}
                      width={750}
                      height={600}
                    />
                  </div>

                  <div className={styles.content}>
                    <h3>{item.title}</h3>
                  </div>
                </Link>
              </div>
            </Col>
          ))}
        </Row>
      </Container>
    );
  }

  // ===========================
  // Portfolio page
  // ===========================

  const categories = [
    {
      name: "Magento 2",
      key: "magento2",
      data: projects.magento2,
      color: "magento",
    },
    {
      name: "Shopify",
      key: "shopify",
      data: projects.shopify,
      color: "shopify",
    },
    {
      name: "WooCommerce / WordPress",
      key: "woocommerce",
      data: projects.woocommerce,
      color: "woocommerce",
    },
  ];

  return (
    <Container>
      {categories.map((category) => (
        <div className={styles.portfolioCategory} key={category.key}>
          <div className={styles.categoryHeader}>
            <h2>{category.name}</h2>
          </div>

          <Row>
            {(showAll ? category.data : category.data.slice(0, 3)).map(
              (item: ProjectItem) => (
                <Col lg={4} md={4} sm={6} key={item.url}>
                  <div className={styles.singleProjectsBox}>
                    <Link
                      href={item.url}
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      <div className={styles.image}>
                        <Image
                          src={item.img}
                          alt={`Screenshot of the ${item.title} website`}
                          width={750}
                          height={600}
                        />
                      </div>

                      <div className={styles.content}>
                        <span
                          className={`${styles.tech} ${styles[category.color]}`}
                        >
                          {category.name}
                        </span>

                        <h3>{item.title}</h3>
                      </div>
                    </Link>
                  </div>
                </Col>
              )
            )}
          </Row>
        </div>
      ))}
    </Container>
  );
};

export default CaseStudy;