import React from "react";

import Card from "../../../components/Card";
import CardContent from "../../../components/Card/CardContent";
import CardHeader from "../../../components/Card/CardHeader";
import { useI18n } from "../../../contexts/I18nContext";
import { AssetList } from "../types/asset";

import { ProductAssetsGallery } from "./ProductAssetsGallery";
import { ProductAssetsTable } from "./ProductAssetsTable";

export interface ProductAssetsCardProps {
  assets: AssetList[];
}

export const ProductAssetsCard: React.FC<ProductAssetsCardProps> = ({ assets }) => {
  const { t } = useI18n();

  const imageAssets = assets.filter((asset) => asset.asset_type == "image");
  const otherAssets = assets.filter((asset) => asset.asset_type !== "image");

  return (
    <>
      <Card columns={2} isEditable={false}>
        <CardHeader title={t("Assets")} />

        {imageAssets.length > 0 && (
          <>
            <CardContent
              sx={{
                width: "100%",
                height: 400,
                overflowY: "scroll",
                paddingTop: 0,
                paddingBottom: 0,
                paddingLeft: 3,
                paddingRight: 3,
              }}
            >
              <ProductAssetsGallery assets={imageAssets} />
            </CardContent>
          </>
        )}

        {otherAssets.length > 0 && <ProductAssetsTable assets={otherAssets} />}
      </Card>
    </>
  );
};