import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState } from "react";
import CssFlex from "../../../ui/CssFlex";
import StarEmpty from "../../../ui/Icon/StarEmpty";
import Typography from "../../../ui/Typography";
import TextField from "../../../ui/next/TextField";
import getClasses from "./styles";
import Dialog from "../../../ui/lab/Dialog";
import Checkbox from "../../../ui/next/Checkbox";
import Loading from "../../../ui/Loading";
import Link from "../../../ui/Link";
import Bolt from "../../../ui/Icon/Bolt";

var AssetsViewHeader = function AssetsViewHeader(props) {
  var translations = props.translations,
      autoCampaign = props.autoCampaign,
      pmaxCampaigns = props.pmaxCampaigns,
      onGetAssetsFromPmaxCampaign = props.onGetAssetsFromPmaxCampaign,
      onGetPreviousState = props.onGetPreviousState,
      onOpenAIModal = props.onOpenAIModal;
  var isLoadingAI = props.isLoadingAI;

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

  var _useState3 = useState(true),
      _useState4 = _slicedToArray(_useState3, 2),
      showModal = _useState4[0],
      setShowModal = _useState4[1];

  var _useState5 = useState({}),
      _useState6 = _slicedToArray(_useState5, 2),
      auxCampaignState = _useState6[0],
      setAuxCampaignState = _useState6[1];

  var classes = getClasses();
  var allValue = {
    label: "".concat(translations.header.filter.placeholder),
    value: "all"
  };

  var _useState7 = useState(allValue.value),
      _useState8 = _slicedToArray(_useState7, 2),
      auxCampaignSelected = _useState8[0],
      setAuxCampaignSelected = _useState8[1];

  var _useState9 = useState(allValue.value),
      _useState10 = _slicedToArray(_useState9, 2),
      campaignSelected = _useState10[0],
      setCampaignSelected = _useState10[1];

  if (!pmaxCampaigns || pmaxCampaigns.length === 0) {
    return /*#__PURE__*/React.createElement(CssFlex, {
      justifyContent: "space-between",
      alignItems: "center"
    }, /*#__PURE__*/React.createElement(CssFlex, {
      gap: "sm",
      alignItems: "center"
    }, /*#__PURE__*/React.createElement(StarEmpty, {
      color: "blue",
      size: 24
    }), /*#__PURE__*/React.createElement(Typography, {
      variant: "title2",
      shade: 800,
      weight: "bold"
    }, translations.header.title)), /*#__PURE__*/React.createElement(Link, {
      alignItems: "center",
      disabled: isLoadingAI,
      onClick: function onClick() {
        return onOpenAIModal();
      }
    }, /*#__PURE__*/React.createElement(CssFlex, {
      gap: "sm",
      alignItems: "center"
    }, isLoadingAI && /*#__PURE__*/React.createElement(Loading, {
      size: 12,
      color: "primary"
    }), !isLoadingAI && /*#__PURE__*/React.createElement(Bolt, {
      size: 24,
      color: "blue"
    }), /*#__PURE__*/React.createElement(Typography, {
      variant: "small",
      color: "blue"
    }, translations.header.ai.loading))));
  }

  var options = [allValue, pmaxCampaigns.map(function (camp) {
    return {
      label: camp.campaign_name,
      value: camp.id
    };
  })].flat();

  var handleChangeOption = function handleChangeOption(event) {
    if (campaignSelected === "all" && event.target.value !== "all") {
      var _autoCampaign$square_, _autoCampaign$landsca, _autoCampaign$square_2, _autoCampaign$landsca2;

      var campaignState = {
        headlines: autoCampaign.headlines || [],
        descriptions: autoCampaign.descriptions || [],
        long_headlines: autoCampaign.long_headlines || [],
        images: {
          square_images: (autoCampaign === null || autoCampaign === void 0 ? void 0 : (_autoCampaign$square_ = autoCampaign.square_images) === null || _autoCampaign$square_ === void 0 ? void 0 : _autoCampaign$square_.map(function (asset) {
            return asset.id;
          })) || [],
          landscape_images: (autoCampaign === null || autoCampaign === void 0 ? void 0 : (_autoCampaign$landsca = autoCampaign.landscape_images) === null || _autoCampaign$landsca === void 0 ? void 0 : _autoCampaign$landsca.map(function (asset) {
            return asset.id;
          })) || [],
          square_logo_images: (autoCampaign === null || autoCampaign === void 0 ? void 0 : (_autoCampaign$square_2 = autoCampaign.square_logo_images) === null || _autoCampaign$square_2 === void 0 ? void 0 : _autoCampaign$square_2.map(function (asset) {
            return asset.id;
          })) || [],
          landscape_logo_images: (autoCampaign === null || autoCampaign === void 0 ? void 0 : (_autoCampaign$landsca2 = autoCampaign.landscape_logo_images) === null || _autoCampaign$landsca2 === void 0 ? void 0 : _autoCampaign$landsca2.map(function (asset) {
            return asset.id;
          })) || []
        }
      };
      setAuxCampaignState(campaignState);
    }

    setCampaignSelected(event.target.value);

    if (showModal) {
      setOpen(true);
    } else {
      handleCloseModal(true, event.target.value);
    }
  }; // Incluimos el value únicamente si se deja de mostrar el modal, para poder tener acceso al nuevo valor de campaignSelected:


  var handleCloseModal = function handleCloseModal(apply, value) {
    if (apply) {
      if (!!value && value === "all" && campaignSelected !== "all" || !value && campaignSelected === "all") {
        onGetPreviousState(auxCampaignState);
        setAuxCampaignState({});
      } else {
        onGetAssetsFromPmaxCampaign(value || campaignSelected);
      }

      setAuxCampaignSelected(value || campaignSelected);
    } else {
      setCampaignSelected(auxCampaignSelected);
    }

    setOpen(false);
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CssFlex, {
    direction: "column",
    gap: "md"
  }, /*#__PURE__*/React.createElement(CssFlex, {
    justifyContent: "space-between",
    alignItems: "center"
  }, /*#__PURE__*/React.createElement(CssFlex, {
    gap: "sm",
    alignItems: "center"
  }, /*#__PURE__*/React.createElement(StarEmpty, {
    color: "blue",
    size: 24
  }), /*#__PURE__*/React.createElement(Typography, {
    variant: "title2",
    shade: 800,
    weight: "bold"
  }, translations.header.title)), /*#__PURE__*/React.createElement(Link, {
    alignItems: "center",
    disabled: isLoadingAI,
    onClick: function onClick() {
      return onOpenAIModal();
    }
  }, /*#__PURE__*/React.createElement(CssFlex, {
    gap: "sm",
    alignItems: "center"
  }, isLoadingAI && /*#__PURE__*/React.createElement(Loading, {
    size: 12,
    color: "primary"
  }), !isLoadingAI && /*#__PURE__*/React.createElement(Bolt, {
    size: 24,
    color: "blue"
  }), /*#__PURE__*/React.createElement(Typography, {
    variant: "small",
    color: "blue"
  }, translations.header.ai.loading)))), /*#__PURE__*/React.createElement(CssFlex, {
    alignItems: "center",
    gap: "md"
  }, /*#__PURE__*/React.createElement(TextField, {
    onChange: handleChangeOption,
    select: true,
    placeholder: translations.header.filter.placeholder,
    value: campaignSelected,
    className: classes.select
  }, options.map(function (option, index) {
    return /*#__PURE__*/React.createElement("option", {
      key: option.value,
      value: option.value,
      hidden: index === 0 && campaignSelected === "all",
      disabled: index === 0 && campaignSelected === "all"
    }, index === 0 && campaignSelected !== "all" ? translations.header.filter.no_selected : option.label);
  })))), /*#__PURE__*/React.createElement(Dialog, {
    open: open,
    onClose: function onClose() {
      return handleCloseModal(false);
    }
  }, /*#__PURE__*/React.createElement(Dialog.Title, null, /*#__PURE__*/React.createElement(CssFlex, {
    justifyContent: "center",
    alignItems: "center",
    width: "100%"
  }, /*#__PURE__*/React.createElement(Typography, {
    variant: "title",
    weight: "semibold",
    shade: 800
  }, translations.header.modal.title))), /*#__PURE__*/React.createElement(Dialog.Body, null, /*#__PURE__*/React.createElement(CssFlex, {
    direction: "column",
    gap: "md"
  }, /*#__PURE__*/React.createElement(CssFlex, {
    justifyContent: "center",
    alignItems: "center",
    width: "100%"
  }, /*#__PURE__*/React.createElement(Typography, {
    variant: "small",
    weight: "normal",
    shade: 800
  }, translations.header.modal.description)), /*#__PURE__*/React.createElement(Checkbox, {
    checked: !showModal,
    onChange: function onChange() {
      return setShowModal(!showModal);
    }
  }, /*#__PURE__*/React.createElement(Typography, {
    variant: "small",
    weight: "normal",
    shade: 800
  }, translations.header.modal.checkbox)))), /*#__PURE__*/React.createElement(Dialog.Footer, null, /*#__PURE__*/React.createElement(Dialog.FooterButton, {
    variant: "terciary",
    onClick: function onClick() {
      return handleCloseModal(false);
    }
  }, translations.header.modal.cancelButton), /*#__PURE__*/React.createElement(Dialog.FooterButton, {
    variant: "primary",
    onClick: function onClick() {
      return handleCloseModal(true);
    }
  }, translations.header.modal.confirmButton))));
};

export default AssetsViewHeader;