import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";

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, { useMemo } from "react";
import CssFlex from "../../../ui/CssFlex";
import Typography from "../../../ui/Typography";
import TextField from "../../../ui/next/TextField";
import CollapsableChipsList from "../../../ui/CollapsableChipsList";
import InputAdornment from "../../../ui/next/InputAdornment"; // import Autocomplete from "../../../ui/next/Autocomplete";

import LoadingClever from "../../../ui/LoadingClever";
import styled from "../../../ui/styles/styled";
var MIN_AGE = 18;
var MAX_AGE = 65;
var AVAILABLE_AGES = Array.from({
  length: MAX_AGE - MIN_AGE + 1
}, function (_value, index) {
  return MIN_AGE + index;
});
var GoalForm = /*#__PURE__*/React.forwardRef(function (_ref, _ref3) {
  var translations = _ref.translations,
      _ref$audiences = _ref.audiences,
      audiences = _ref$audiences === void 0 ? [] : _ref$audiences,
      _ref$locations = _ref.locations,
      locations = _ref$locations === void 0 ? [] : _ref$locations,
      _ref$languages = _ref.languages,
      languages = _ref$languages === void 0 ? [] : _ref$languages,
      data = _ref.data,
      setData = _ref.setData,
      URLField = _ref.URLField,
      _ref$campaignNames = _ref.campaignNames,
      campaignNames = _ref$campaignNames === void 0 ? [] : _ref$campaignNames;
  var notSelected = useMemo(function () {
    return {
      audiences: audiences.filter(function (audience) {
        return !data.audiences.some(function (selected) {
          return selected.id === audience.id;
        });
      }),
      locations: locations.filter(function (location) {
        return !data.locations.some(function (selected) {
          return selected.id === location.id;
        });
      }),
      languages: languages.filter(function (language) {
        return !data.languages.some(function (selected) {
          return selected.id === language.id;
        });
      })
    };
  }, [audiences, data.audiences, locations, data.locations, languages, data.languages]);

  var handleChange = function handleChange(field, value) {
    if (field === "daily_budget") {
      if (value >= 0) {
        setData(_objectSpread(_objectSpread({}, data), {}, _defineProperty({}, field, value)));
      }
    } else {
      setData(_objectSpread(_objectSpread({}, data), {}, _defineProperty({}, field, value)));
    }
  };

  var addListItem = function addListItem(field, value) {
    handleChange(field, [].concat(_toConsumableArray(data[field]), [notSelected[field].find(function (item) {
      return item.id.toString() === value.toString();
    })]));
  };

  var removeListItem = function removeListItem(field, item) {
    handleChange(field, data[field].filter(function (selected) {
      return selected.id.toString() !== item.value.toString();
    }));
  }; // const getChipItem = ({ id, name }) => {
  //   const subCategories = name.split(">");
  //   if (subCategories.length > 2 && name.length > 50) {
  //     return {
  //       value: id,
  //       label: `${subCategories[0]}> ... >${subCategories[subCategories.length - 1]
  //         }`,
  //       title: name,
  //     };
  //   }
  //   return { value: id, label: name };
  // };


  var getCampaignNameError = function getCampaignNameError(campaignName) {
    if (campaignName.length > 25) {
      return translations.form.errors.max_25_chars;
    }

    if (campaignNames.map(function (cn) {
      return cn.toLowerCase();
    }).includes(campaignName.toLowerCase())) {
      return translations.form.errors.campaign_name_used;
    }

    return "";
  };

  return /*#__PURE__*/React.createElement(Wrapper, {
    direction: "column",
    gap: "sm"
  }, /*#__PURE__*/React.createElement(Description, {
    variant: "inputText",
    shade: 800
  }, translations.description), /*#__PURE__*/React.createElement(TextField, {
    label: translations.form.business_name,
    value: data.business_name,
    error: data.business_name.length > 25,
    helperText: data.business_name.length > 25 ? translations.form.errors.max_25_chars : "",
    onChange: function onChange(ev) {
      return handleChange("business_name", ev.target.value);
    },
    autoFocus: "on",
    required: true
  }), !(URLField !== null && URLField !== void 0 && URLField.hidden) && /*#__PURE__*/React.createElement(TextField, {
    label: translations.form.domain.label,
    value: data.domain,
    onChange: function onChange(ev) {
      return handleChange("domain", ev.target.value);
    },
    onBlur: URLField === null || URLField === void 0 ? void 0 : URLField.onBlur,
    disabled: URLField === null || URLField === void 0 ? void 0 : URLField.disabled,
    error: URLField === null || URLField === void 0 ? void 0 : URLField.isError,
    helperText: URLField !== null && URLField !== void 0 && URLField.isError ? translations.form.domain.helper_text : "",
    endAdornment: (URLField === null || URLField === void 0 ? void 0 : URLField.isLoading) && /*#__PURE__*/React.createElement(InputAdornment, {
      position: "end"
    }, /*#__PURE__*/React.createElement(LoadingClever, {
      size: 24
    })),
    required: true
  }), /*#__PURE__*/React.createElement(CssFlex, {
    alignItems: "center",
    justifyContent: "space-between",
    wrap: "wrap",
    gap: "md"
  }, /*#__PURE__*/React.createElement(SmallField, {
    select: true,
    label: translations.form.gender.label,
    value: data.gender,
    onChange: function onChange(ev) {
      return handleChange("gender", ev.target.value);
    }
  }, /*#__PURE__*/React.createElement("option", {
    value: "both"
  }, translations.form.gender.both), /*#__PURE__*/React.createElement("option", {
    value: "male"
  }, translations.form.gender.male), /*#__PURE__*/React.createElement("option", {
    value: "female"
  }, translations.form.gender.female)), /*#__PURE__*/React.createElement(SmallField, {
    select: true,
    label: translations.form.age.from,
    value: data.from_age,
    onChange: function onChange(ev) {
      return handleChange("from_age", ev.target.value);
    }
  }, AVAILABLE_AGES.map(function (age) {
    return age <= data.to_age && /*#__PURE__*/React.createElement("option", {
      key: "from-age-option-".concat(age),
      value: age
    }, age === MAX_AGE ? "+65" : age);
  })), /*#__PURE__*/React.createElement(SmallField, {
    select: true,
    label: translations.form.age.to,
    value: data.to_age,
    onChange: function onChange(ev) {
      return handleChange("to_age", ev.target.value);
    }
  }, AVAILABLE_AGES.map(function (age) {
    return age >= data.from_age && /*#__PURE__*/React.createElement("option", {
      key: "to-age-option-".concat(age),
      value: age
    }, age === MAX_AGE ? "+65" : age);
  }))), /*#__PURE__*/React.createElement(TextField, {
    ref: function ref(el) {
      _ref3.current.locations = el;
    },
    select: true,
    label: translations.form.locations.label,
    value: "placeholder",
    disabled: notSelected.locations.length === 0,
    onChange: function onChange(ev) {
      addListItem("locations", ev.target.value);
      ev.target.setCustomValidity("");
    }
  }, /*#__PURE__*/React.createElement("option", {
    value: "placeholder",
    disabled: true,
    hidden: true
  }, translations.form.locations.placeholder), notSelected.locations.map(function (_ref2) {
    var id = _ref2.id,
        name = _ref2.name;
    return /*#__PURE__*/React.createElement("option", {
      key: "locations-".concat(id),
      value: id
    }, name);
  })), /*#__PURE__*/React.createElement(CollapsableChipsList, {
    items: data.locations.map(function (l) {
      return {
        value: l.id,
        label: l.name
      };
    }),
    onDelete: function onDelete(item) {
      return removeListItem("locations", item);
    },
    showMoreText: translations.form.locations.show_more,
    showLessText: translations.form.locations.show_less,
    displayCount: 5
  }), /*#__PURE__*/React.createElement(TextField, {
    ref: function ref(el) {
      _ref3.current.languages = el;
    },
    select: true,
    label: translations.form.languages.label,
    value: "placeholder",
    disabled: notSelected.languages.length === 0,
    onChange: function onChange(ev) {
      addListItem("languages", ev.target.value);
      ev.target.setCustomValidity("");
    }
  }, /*#__PURE__*/React.createElement("option", {
    value: "placeholder",
    disabled: true,
    hidden: true
  }, translations.form.languages.placeholder), notSelected.languages.map(function (_ref4) {
    var id = _ref4.id,
        name = _ref4.name;
    return /*#__PURE__*/React.createElement("option", {
      key: "languages-".concat(id),
      value: id
    }, name);
  })), /*#__PURE__*/React.createElement(CollapsableChipsList, {
    items: data.languages.map(function (l) {
      return {
        value: l.id,
        label: l.name
      };
    }),
    onDelete: function onDelete(item) {
      return removeListItem("languages", item);
    },
    showMoreText: translations.form.languages.show_more,
    showLessText: translations.form.languages.show_less,
    displayCount: 5
  }), /*#__PURE__*/React.createElement(BudgetField, {
    type: "number",
    label: translations.form.daily_budget.label,
    value: data.daily_budget,
    onChange: function onChange(ev) {
      return handleChange("daily_budget", ev.target.value);
    },
    required: true,
    endAdornment: /*#__PURE__*/React.createElement(BudgetUnit, {
      position: "end"
    }, "$ / ", translations.form.daily_budget.day)
  }), data.daily_budget < 5 && /*#__PURE__*/React.createElement(Typography, {
    variant: "small",
    shade: 500,
    color: "danger"
  }, translations.form.daily_budget.error), /*#__PURE__*/React.createElement(TextField, {
    label: translations.form.campaign_name.label,
    placeholder: translations.form.campaign_name.placeholder,
    value: data.campaign_name,
    error: data.campaign_name.length > 25 || campaignNames.map(function (cn) {
      return cn.toLowerCase();
    }).includes(data.campaign_name.toLowerCase()),
    helperText: getCampaignNameError(data.campaign_name),
    onChange: function onChange(ev) {
      return handleChange("campaign_name", ev.target.value);
    },
    required: true
  }));
});
var Wrapper = styled(CssFlex)(function (_ref5) {
  var theme = _ref5.theme;
  return _defineProperty({
    margin: "".concat(theme.spaces.sm, " auto"),
    maxWidth: "374px"
  }, theme.breakpoints.up("md"), {
    paddingRight: theme.spaces.xl
  });
});
var Description = styled(Typography)(function (_ref7) {
  var theme = _ref7.theme;
  return {
    marginBottom: theme.spaces.sm
  };
});
var SmallField = styled(TextField)(function () {
  return {
    maxWidth: "114px"
  };
});
var BudgetField = styled(TextField)(function (_ref8) {
  var theme = _ref8.theme;
  return {
    "& input": {
      paddingInlineEnd: "calc(".concat(theme.spaces["2xl"], " + ").concat(theme.spaces.sm, ")")
    }
  };
});
var BudgetUnit = styled(InputAdornment)(function () {
  return {
    width: "auto"
  };
});
export default GoalForm;