import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState, useEffect } from "react";
import { LazyMotion, domAnimation, AnimatePresence, m } from "framer-motion";
import CssFlex from "../../../ui/CssFlex";
import LoadingClever from "../../../ui/LoadingClever";
import Typography from "../../../ui/Typography";
import Link from "../../../ui/Link";
import IconButton from "../../../ui/next/IconButton";
import CircleTimes from "../../../ui/Icon/CircleTimes";
import GreenCheck from "../../PMAXIntroCards/assets/GreenCheck";
import getClasses from "./styles";
var MotionSnackbar = m(CssFlex);

var AIAssetsGeneration = function AIAssetsGeneration(props) {
  var translations = props.translations,
      onOpenAIModal = props.onOpenAIModal,
      suggestedAssets = props.suggestedAssets;
  var isLoadingAI = props.isLoadingAI,
      isLoading = props.isLoading;
  var generatedCount = suggestedAssets.length;
  var classes = getClasses();

  var _useState = useState(true),
      _useState2 = _slicedToArray(_useState, 2),
      show = _useState2[0],
      setShow = _useState2[1];

  useEffect(function () {
    if (show && isLoadingAI) {
      setTimeout(function () {
        if (isLoadingAI) {
          // Only if still generating
          setShow(false);
        }
      }, 3000);
    }
  }, [show]);
  useEffect(function () {
    setShow(true); // Show snackbar after state change
  }, [isLoadingAI]);

  if (isLoading) {
    return null;
  }

  return /*#__PURE__*/React.createElement(LazyMotion, {
    features: domAnimation,
    strict: true
  }, /*#__PURE__*/React.createElement(AnimatePresence, null, show && /*#__PURE__*/React.createElement(MotionSnackbar, {
    key: "AI-assets-generation-snackbar",
    justifyContent: "center",
    alignItems: "center",
    gap: "md",
    maxWidth: ["90%", "80%"],
    className: classes.syncContainer // Framer motion props
    ,
    initial: {
      opacity: 0,
      scale: 0,
      x: "-50%",
      transition: {
        ease: "easeOut",
        duration: 0.5
      }
    },
    animate: {
      opacity: 1,
      scale: 1
    },
    exit: {
      opacity: 0,
      scale: 0,
      transition: {
        ease: "easeIn",
        duration: 0.3
      }
    }
  }, isLoadingAI ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LoadingClever, {
    size: 24
  }), /*#__PURE__*/React.createElement(Typography, {
    variant: "small",
    shade: 700,
    weight: "semibold"
  }, translations.iaStatus.loading)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GreenCheck, {
    style: {
      width: "24px",
      height: "24px"
    }
  }), /*#__PURE__*/React.createElement(Typography, {
    variant: "small",
    shade: 700,
    weight: "semibold"
  }, generatedCount === 0 ? translations.iaStatus.ready_no_assets : translations.iaStatus.ready), generatedCount > 0 && /*#__PURE__*/React.createElement(Link, {
    id: "ai-generated-add-assets-button",
    onClick: function onClick() {
      onOpenAIModal();
      setShow(false);
    }
  }, translations.iaStatus.button), /*#__PURE__*/React.createElement(IconButton, {
    onClick: function onClick() {
      return setShow(false);
    },
    icon: /*#__PURE__*/React.createElement(CircleTimes, {
      color: "neutral"
    })
  })))));
};

export default AIAssetsGeneration;