import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

// @ts-nocheck
import React, { useState } from "react";
import CssFlex from "../../../ui/CssFlex";
import Typography from "../../../ui/Typography";
import Link from "../../../ui/Link";
import IconButton from "../../../ui/next/IconButton";
import Collapse from "../../../ui/Collapse";
import Tabs from "../../../ui/next/Tabs";
import Tab from "../../../ui/next/Tab";
import StarEmpty from "../../../ui/Icon/StarEmpty";
import ChevronRight from "../../../ui/Icon/ChevronRight";
import styled from "../../../ui/styles/styled";
import TabTexts from "./TabTexts";
import TabVisuals from "./TabVisuals";

function AssetsSummary(_ref) {
  var translations = _ref.translations,
      assetsInfo = _ref.assetsInfo,
      goToStep = _ref.goToStep;

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      open = _useState2[0],
      setOpen = _useState2[1];

  var _useState3 = useState("visuals"),
      _useState4 = _slicedToArray(_useState3, 2),
      tab = _useState4[0],
      setTab = _useState4[1];

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CssFlex, {
    alignItems: "center",
    gap: "sm",
    mt: "xl",
    mb: "sm"
  }, /*#__PURE__*/React.createElement(StarEmpty, {
    color: "primary"
  }), /*#__PURE__*/React.createElement(Typography, {
    variant: "title2",
    shade: 800
  }, translations.title), /*#__PURE__*/React.createElement(StyledLink, {
    onClick: function onClick() {
      return goToStep("assets");
    }
  }, translations.update_button), /*#__PURE__*/React.createElement(Trigger, {
    icon: /*#__PURE__*/React.createElement(ChevronRight, null),
    onClick: function onClick() {
      return setOpen(!open);
    },
    "data-open": open
  })), /*#__PURE__*/React.createElement(StyledCollapse, {
    open: open
  }, /*#__PURE__*/React.createElement(CssFlex, {
    direction: "column",
    gap: "sm"
  }, /*#__PURE__*/React.createElement(CssFlex, {
    gap: "md",
    mt: "sm"
  }, /*#__PURE__*/React.createElement(Tabs, {
    variant: "caption",
    defaultValue: tab,
    sx: {
      gap: "2xl"
    },
    onChange: setTab
  }, /*#__PURE__*/React.createElement(Tab, {
    variant: "caption",
    value: "visuals",
    label: "visuals"
  }), /*#__PURE__*/React.createElement(Tab, {
    variant: "caption",
    value: "texts",
    label: "texts"
  }))), tab === "texts" && /*#__PURE__*/React.createElement(TabTexts, {
    texts: assetsInfo.auto_campaign,
    translations: translations
  }), tab === "visuals" && /*#__PURE__*/React.createElement(TabVisuals, {
    images: assetsInfo.auto_campaign,
    translations: translations
  }))));
}

var StyledLink = styled(Link)(function (_ref2) {
  var theme = _ref2.theme;
  return _objectSpread(_objectSpread({}, theme.typography.variants.small), {}, {
    textDecoration: "underline"
  });
});
var Trigger = styled(IconButton)(function (_ref3) {
  var theme = _ref3.theme;
  return {
    marginLeft: "auto",
    transitionDuration: theme.transitions.duration["short"],
    transitionProperty: "transform",
    "&[data-open=\"true\"]": {
      transform: "rotate(90deg)"
    }
  };
});
var StyledCollapse = styled(Collapse)(function (_ref4) {
  var theme = _ref4.theme;
  return {
    paddingBottom: theme.spaces.lg,
    borderBottom: "1px solid ".concat(theme.colors.neutral[200])
  };
});
export default AssetsSummary;