import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["translations", "URLField", "onSupport", "onSubmit", "onClose", "defaultState", "campaignNames"];

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, { useEffect, useState, useRef } from "react";
import { Fill } from "nano-slots";
import Dialog from "../../../ui/lab/Dialog";
import CssFlex from "../../../ui/CssFlex";
import Link from "../../../ui/Link";
import Typography from "../../../ui/Typography";
import Target from "../../../ui/Icon/Target";
import Telephone from "../../../ui/Icon/Telephone";
import styled from "../../../ui/styles/styled";
import { usePMaxState } from "../context";
import { nextStep } from "../reducer";
import GoalForm from "./GoalForm";
import { useTrackEvent } from "../events";
var DEFAULT_FORM_STATE = {
  business_name: "",
  domain: "",
  audiences: [],
  gender: "both",
  from_age: 18,
  to_age: 65,
  locations: [],
  languages: [],
  daily_budget: 20,
  campaign_name: ""
};

function StepGoal(_ref) {
  var translations = _ref.translations,
      URLField = _ref.URLField,
      onSupport = _ref.onSupport,
      onSubmit = _ref.onSubmit,
      onClose = _ref.onClose,
      defaultState = _ref.defaultState,
      _ref$campaignNames = _ref.campaignNames,
      campaignNames = _ref$campaignNames === void 0 ? [] : _ref$campaignNames,
      restProps = _objectWithoutProperties(_ref, _excluded);

  var _usePMaxState = usePMaxState(),
      _usePMaxState2 = _slicedToArray(_usePMaxState, 2),
      dispatch = _usePMaxState2[1];

  var trackEvent = useTrackEvent();
  var fieldsRef = useRef({});

  var _useState = useState(function () {
    return _objectSpread(_objectSpread({}, DEFAULT_FORM_STATE), defaultState);
  }),
      _useState2 = _slicedToArray(_useState, 2),
      data = _useState2[0],
      setData = _useState2[1];

  var validMultiSelects = function validMultiSelects() {
    // if (data.audiences.length === 0) {
    //   fieldsRef?.current?.audiences?.setCustomValidity(
    //     translations.error_message
    //   );
    //   fieldsRef?.current?.audiences?.reportValidity();
    //   return false;
    // }
    if (data.locations.length === 0) {
      var _fieldsRef$current, _fieldsRef$current$lo, _fieldsRef$current2, _fieldsRef$current2$l;

      fieldsRef === null || fieldsRef === void 0 ? void 0 : (_fieldsRef$current = fieldsRef.current) === null || _fieldsRef$current === void 0 ? void 0 : (_fieldsRef$current$lo = _fieldsRef$current.locations) === null || _fieldsRef$current$lo === void 0 ? void 0 : _fieldsRef$current$lo.setCustomValidity(translations.error_message);
      fieldsRef === null || fieldsRef === void 0 ? void 0 : (_fieldsRef$current2 = fieldsRef.current) === null || _fieldsRef$current2 === void 0 ? void 0 : (_fieldsRef$current2$l = _fieldsRef$current2.locations) === null || _fieldsRef$current2$l === void 0 ? void 0 : _fieldsRef$current2$l.reportValidity();
      return false;
    }

    if (data.languages.length === 0) {
      var _fieldsRef$current3, _fieldsRef$current3$l, _fieldsRef$current4, _fieldsRef$current4$l;

      fieldsRef === null || fieldsRef === void 0 ? void 0 : (_fieldsRef$current3 = fieldsRef.current) === null || _fieldsRef$current3 === void 0 ? void 0 : (_fieldsRef$current3$l = _fieldsRef$current3.languages) === null || _fieldsRef$current3$l === void 0 ? void 0 : _fieldsRef$current3$l.setCustomValidity(translations.error_message);
      fieldsRef === null || fieldsRef === void 0 ? void 0 : (_fieldsRef$current4 = fieldsRef.current) === null || _fieldsRef$current4 === void 0 ? void 0 : (_fieldsRef$current4$l = _fieldsRef$current4.languages) === null || _fieldsRef$current4$l === void 0 ? void 0 : _fieldsRef$current4$l.reportValidity();
      return false;
    }

    return true;
  };

  var handleSubmit = function handleSubmit(ev) {
    ev.preventDefault();

    if (validMultiSelects()) {
      onSubmit(data);
      nextStep(dispatch);
    }
  };

  useEffect(function () {
    trackEvent({
      key: "step_goal_seen"
    });
  }, [trackEvent]);

  var handleSupport = function handleSupport() {
    trackEvent({
      key: "step_click_help"
    });
    onSupport();
  };

  return /*#__PURE__*/React.createElement(Fill, {
    name: "pmax-creation-step-goal"
  }, /*#__PURE__*/React.createElement("form", {
    onSubmit: handleSubmit
  }, /*#__PURE__*/React.createElement(Dialog.Body, null, /*#__PURE__*/React.createElement(CssFlex, {
    alignItems: "center",
    gap: "sm"
  }, /*#__PURE__*/React.createElement(Target, {
    color: "primary"
  }), /*#__PURE__*/React.createElement(Typography, {
    variant: "title2",
    shade: 800
  }, translations.title)), /*#__PURE__*/React.createElement(GoalForm, _extends({
    ref: fieldsRef,
    translations: translations,
    URLField: URLField,
    data: data,
    setData: setData,
    campaignNames: campaignNames
  }, restProps)), onSupport && /*#__PURE__*/React.createElement(SupportLink, {
    color: "neutral",
    shade: 400,
    onClick: handleSupport
  }, /*#__PURE__*/React.createElement(Telephone, {
    size: 16,
    shade: 400
  }), translations.support_link)), /*#__PURE__*/React.createElement(Dialog.Footer, null, /*#__PURE__*/React.createElement(Dialog.FooterButton, {
    variant: "terciary",
    onClick: onClose
  }, translations.back_button), /*#__PURE__*/React.createElement(Dialog.FooterButton, {
    type: "submit",
    disabled: (URLField === null || URLField === void 0 ? void 0 : URLField.isLoading) || (URLField === null || URLField === void 0 ? void 0 : URLField.isError) || data.daily_budget < 5 || data.campaign_name.length > 25 || campaignNames.map(function (cn) {
      return cn.toLowerCase();
    }).includes(data.campaign_name.toLowerCase()) || data.business_name.length > 25
  }, translations.next_button))));
}

var SupportLink = styled(Link)(function (_ref2) {
  var theme = _ref2.theme;
  return _objectSpread(_objectSpread({
    display: "inline-flex",
    alignItems: "center",
    gap: theme.spaces.xs,
    marginTop: theme.spaces.lg
  }, theme.typography.variants.small), {}, {
    textDecoration: "underline",
    "& > *": {
      flexShrink: 0
    }
  });
});
export default StepGoal;