import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";

var _templateObject;

import React, { useEffect } from "react";
import CssFlex from "../../ui/CssFlex";
import Typography from "../../ui/Typography";
import TextField from "../../ui/next/TextField";
import StarEmpty from "../../ui/Icon/StarEmpty";
import styled from "../../ui/styles/styled";

var AssetsManagerHeader = function AssetsManagerHeader(props) {
  var pmaxCampaigns = props.pmaxCampaigns,
      translations = props.translations,
      campaignSelected = props.campaignSelected,
      setCampaignSelected = props.setCampaignSelected;
  var allValue = {
    label: "".concat(translations.header.filter.firstOption),
    value: "all"
  };
  var options = [allValue, pmaxCampaigns.map(function (camp) {
    return {
      label: camp.campaign_name,
      value: camp.id
    };
  })].flat();

  var handleChangeOption = function handleChangeOption(event) {
    setCampaignSelected(event.target.value);
  };

  return /*#__PURE__*/React.createElement(CssFlex, {
    direction: "column",
    gap: "sm",
    width: "100%"
  }, /*#__PURE__*/React.createElement(CssFlex, {
    alignItems: "center",
    gap: "sm"
  }, /*#__PURE__*/React.createElement(StarEmpty, {
    color: "blue",
    size: 24
  }), /*#__PURE__*/React.createElement(Typography, {
    variant: "title2",
    shade: 800,
    weight: "semibold"
  }, translations.header.title)), /*#__PURE__*/React.createElement(CssFlex, {
    justifyContent: "flex-start",
    alignItems: "center",
    gap: "md",
    pl: "xl"
  }, /*#__PURE__*/React.createElement(Typography, {
    variant: "small",
    shade: 800
  }, translations.header.filter.description), /*#__PURE__*/React.createElement(StyledTextField, {
    select: true,
    value: campaignSelected !== null && campaignSelected !== void 0 ? campaignSelected : "all",
    onChange: handleChangeOption
  }, options.map(function (option) {
    return /*#__PURE__*/React.createElement("option", {
      key: option.value,
      value: option.value
    }, option.label);
  }))));
};

var StyledTextField = styled(TextField)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-width: 300px;\n"])));
export default AssetsManagerHeader;