import type { FullyPopulatedProduct } from "@/services/models/Product";

import { useState } from "react";

import ChevronDownSVG from "@/assets/icons/chevron-down.svg";
import ChevronUpSVG from "@/assets/icons/chevron-up.svg";
import PenSVG from "@/assets/icons/pen.svg";
import TrashSVG from "@/assets/icons/trash.svg";

import Button from "@/components/Button/Button";
import { deleteProduct } from "@/services/actions/productsAPI";
import VariationReadItem from "../VariationReadItem/VariationReadItem";

import styles from "./DashboardProduct.module.scss";

export default function DashboardProduct({
  product,
  isSelected,
  onToggleSelectProduct,
}: {
  product: FullyPopulatedProduct;
  isSelected: boolean;
  onToggleSelectProduct: (slug: string) => void;
}) {
  const [isOpen, setIsOpen] = useState(false);

  function handleToggle() {
    setIsOpen((isOpen) => !isOpen);
  }

  async function handleDelete(slug: string) {
    await deleteProduct(slug);
  }

  return (
    <>
      <tr>
        <td>
          <Button
            variant="plain"
            icon={isOpen ? ChevronUpSVG : ChevronDownSVG}
            onClick={handleToggle}
          />
        </td>
        <td>
          <input
            type="checkbox"
            checked={isSelected}
            onChange={() => {
              onToggleSelectProduct(product.slug);
            }}
          />
        </td>
        <td>{product.name}</td>
        <td>{product.slug}</td>
        <td>{product.categoryId.name}</td>
        <td>{product.collectionId?.name ?? "—"}</td>
        <td>{product.configuration ?? "—"}</td>
        <td>
          <div className={styles["dashboard-product__button-group"]}>
            <Button
              variant="plain"
              icon={PenSVG}
              href={`/dashboard/products/edit/${product.slug}`}
            />

            <Button
              variant="plain"
              icon={TrashSVG}
              onClick={() => void handleDelete(product.slug)}
            />
          </div>
        </td>
      </tr>

      {isOpen && (
        <tr>
          <td></td>
          <td colSpan={7}>
            <table>
              <thead>
                <tr>
                  <th>Идентификатор</th>
                  <th>Цвет</th>
                  <th>Цена</th>
                  <th>Скидка</th>
                  <th>Зарезервировано</th>
                  <th>Инвентарь</th>
                  <th>Быстрая Доставка</th>
                </tr>
              </thead>

              <tbody>
                {product.variants.map((variant) => (
                  <VariationReadItem key={variant.sku} variant={variant} />
                ))}
              </tbody>
            </table>
          </td>
        </tr>
      )}
    </>
  );
}