import { jsx as e, jsxs as h, Fragment as q } from "react/jsx-runtime";
import A, { useState as x, useRef as D, useEffect as V, useImperativeHandle as j, useCallback as I } from "react";
import { Container as N, Grid as i, Form as P, TextArea as L, Button as k, Message as O, Input as M, Label as U, Icon as B } from "semantic-ui-react";
import { COUNTRY_OPTIONS as $ } from "../../countries.js";
import { reset as G, sendShowCaseForm as H } from "../reducers/embeddable.js";
import { connect as K } from "react-redux";
import { useDropzone as Y } from "react-dropzone";
import _ from "../../conf/config.json.js";
const J = $.map((o) => ({
  flag: o.flag.toLocaleLowerCase(),
  value: o.text,
  text: o.text
}));
A.createRef();
function Q({ onSelectionChange: o, showValidation: f, inputRef: g, name: a }) {
  const [r, c] = x([]), [n, s] = x([]), l = I((m) => {
    c([...r, ...m]), s([]);
  }, [r]), u = I((m) => {
    s([...m]);
  }, [r]), {
    acceptedFiles: v,
    getRootProps: w,
    getInputProps: b,
    open: E
  } = Y({ accept: "application/pdf,.pdf,.doc,.docx,.xls,.xlsx,.csv,.txt,.rtf,.html,.zip,.mp3,.wma,.mpg,.flv,.avi,.jpg,.jpeg,.png,.gif", maxFiles: 5, multiple: !0, onDrop: l, onDropRejected: u });
  j(g, () => ({
    name: a,
    reset: () => {
      c([]);
    },
    hasErrors: () => r.length == 0,
    value: () => r
  }));
  const y = (m) => {
    const d = [...r];
    d.splice(m, 1), c(d);
  }, z = r.length === 0;
  return /* @__PURE__ */ h(q, { children: [
    n && n[0] && n[0].errors && /* @__PURE__ */ e(N, { fluid: !0, className: `upload files ${z ? "error" : ""}`, children: /* @__PURE__ */ e("div", { className: "error-messages", children: /* @__PURE__ */ e("ul", { style: {}, children: n[0].errors.map((m, d) => /* @__PURE__ */ e("li", { children: "File type not allowed. File type must be - application/-pdf,.pdf,.doc,.docx,.xls,.xlsx,.csv,.txt,.rtf,.html,.zip,.mp3,.wma,.mpg,.flv,.avi,.jpg,.jpeg,.png,.gif " }, d)) }) }) }),
    /* @__PURE__ */ h(N, { fluid: !0, className: "upload files", children: [
      /* @__PURE__ */ h("div", { ...w({ className: "dropzone" }), children: [
        /* @__PURE__ */ e("input", { ...b() }),
        /* @__PURE__ */ h("p", { children: [
          "Drag 'n' drop files here, or click select button to select files. The maximum file size allowed is ",
          _.maxUploadFileSize,
          "MB."
        ] }),
        r.length > 0 ? /* @__PURE__ */ e("ul", { children: r.map((m, d) => /* @__PURE__ */ h("li", { children: [
          /* @__PURE__ */ e(U, { color: "green", icon: "file", children: m.name }),
          /* @__PURE__ */ e(B, { color: "red", name: "remove", size: "large", onClick: (C) => {
            C.stopPropagation(), y(d);
          } })
        ] }, d)) }) : null
      ] }),
      /* @__PURE__ */ e(k, { secondary: !0, onClick: E, children: "Select" })
    ] })
  ] });
}
const W = ({ options: o, placeholder: f, name: g, required: a, showValidation: r, icon: c, inputRef: n }) => {
  const [s, l] = x(null), [u, v] = x(!0);
  return V(() => {
    a && s == null ? v(!0) : v(!1);
  }, [s]), j(n, () => ({
    name: g,
    reset: () => {
      l(null);
    },
    value: () => s,
    hasErrors: () => (console.log(u), u)
  })), /* @__PURE__ */ e(
    P.Dropdown,
    {
      value: s,
      error: u && r,
      name: g,
      onChange: (w, b) => {
        l(b.value);
      },
      multiple: !1,
      search: !0,
      selection: !0,
      options: o,
      placeholder: f
    }
  );
}, S = ({ placeholder: o, name: f, icon: g, required: a, pattern: r, as: c, inputRef: n, showValidation: s }) => {
  const [l, u] = x(""), [v, w] = x(!0);
  return V(() => {
    a && l.trim() == "" || r && !r.test(l) ? w(!0) : w(!1);
  }, [l]), j(n, () => ({
    name: f,
    reset: () => {
      u("");
    },
    hasErrors: () => v,
    value: () => l
  })), /* @__PURE__ */ e(
    c || M,
    {
      value: l,
      error: v && s,
      onChange: (E) => u(E.target.value),
      name: f,
      icon: g,
      iconPosition: "left",
      placeholder: o
    }
  );
}, X = (o) => {
  const [f, g] = x({});
  D();
  const a = D({}), r = (t) => {
    const R = Object.keys(a.current).map((p) => a.current[p]), T = R.map((p) => p.hasErrors()).reduce((p, F) => p || F);
    if (f.files, T)
      g((p) => ({ ...p, showValidation: !0 }));
    else {
      const p = {};
      R.forEach((F) => p[F.name] = F.value()), o.onSubmit(p), setTimeout(() => {
        c();
      }, 5e3);
    }
  }, c = () => {
    Object.keys(a.current).map((R) => a.current[R]).forEach((R) => {
      R.reset();
    }), g({ showValidation: !1, status: null }), o.onReset();
  }, n = (t) => {
    t && (a.current[t.name] = t);
  }, {
    status: s,
    organization: l = "Organization",
    name: u = "Name",
    email: v = "Email",
    country: w = "Country",
    message: b = "Message",
    resetlabel: E = "Reset",
    submitlabel: y = "Submit",
    successmessage: z = "Thanks for submitting your data",
    failuremessage: m = "Something didn't go well, please try again later",
    editing: d
  } = o, { showValidation: C, token: te, reset: re } = f;
  return /* @__PURE__ */ e(N, { fluid: !0, className: "viz showcase", children: /* @__PURE__ */ h(i, { columns: 1, className: C ? "validated" : "", children: [
    /* @__PURE__ */ e(i.Column, { children: /* @__PURE__ */ e(
      S,
      {
        inputRef: (t) => n(t),
        showValidation: C,
        required: !0,
        icon: "building",
        name: "organization",
        placeholder: l
      }
    ) }),
    /* @__PURE__ */ e(i.Column, { children: /* @__PURE__ */ e(
      S,
      {
        inputRef: (t) => n(t),
        showValidation: C,
        required: !0,
        icon: "user",
        name: "name",
        placeholder: u
      }
    ) }),
    /* @__PURE__ */ e(i.Column, { children: /* @__PURE__ */ e(
      S,
      {
        inputRef: (t) => n(t),
        showValidation: C,
        required: !0,
        pattern: /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/,
        icon: "envelope",
        placeholder: v,
        name: "email"
      }
    ) }),
    /* @__PURE__ */ e(i.Column, { children: /* @__PURE__ */ e(P.Field, { children: /* @__PURE__ */ e(
      W,
      {
        inputRef: (t) => n(t),
        showValidation: C,
        name: "country",
        required: !0,
        options: J,
        placeholder: w
      }
    ) }) }),
    /* @__PURE__ */ e(i.Column, { children: /* @__PURE__ */ e(
      Q,
      {
        inputRef: (t) => n(t),
        showValidation: C,
        name: "files"
      }
    ) }),
    /* @__PURE__ */ e(i.Column, { children: /* @__PURE__ */ e(
      S,
      {
        inputRef: (t) => n(t),
        placeholder: b,
        name: "message",
        as: L
      }
    ) }),
    /* @__PURE__ */ h(i.Row, { children: [
      /* @__PURE__ */ h(i.Column, { textAlign: "left", width: 12, verticalAlign: "bottom", className: "form-buttons", children: [
        /* @__PURE__ */ e(
          k,
          {
            className: "btn-reset",
            onClick: (t) => c(),
            children: E
          }
        ),
        /* @__PURE__ */ e(
          k,
          {
            secondary: !0,
            onClick: (t) => r(),
            children: y
          }
        )
      ] }),
      (s == "OK" || d) && /* @__PURE__ */ h(i.Column, { width: 16, children: [
        " ",
        /* @__PURE__ */ e(
          O,
          {
            success: !0,
            content: /* @__PURE__ */ e("p", { children: z })
          }
        )
      ] }),
      (s == "ERROR" || d) && /* @__PURE__ */ h(i.Column, { width: 16, children: [
        " ",
        /* @__PURE__ */ e(O, { negative: !0, children: /* @__PURE__ */ e("p", { children: m }) })
      ] })
    ] })
  ] }) });
}, Z = (o, f) => ({
  status: o.getIn(["embeddable", "showCase", "status"])
}), ee = {
  onSubmit: H,
  onReset: G
}, me = K(Z, ee)(X);
export {
  me as default
};
