import { jsx as r, jsxs as d, Fragment as M } from "react/jsx-runtime";
import { useState as j } from "react";
import i from "prop-types";
import { useCreation as I } from "ahooks";
import z from "lodash/isInteger";
import P from "lodash/isString";
import { styled as F } from "@arcblock/ux/lib/Theme";
import u from "clsx";
import { ExpandMore as A } from "@mui/icons-material";
import E from "../Icon/index.js";
import S from "../hooks/use-mobile.js";
import { splitNavColumns as T, isMailProtocol as W } from "../utils.js";
function _({ links: e = [], flowLayout: g = !1, minColumns: f = 1, maxColumns: k = 4, ...h }) {
  const [x, y] = j(-1), v = S({ key: "md" }), b = e.some((t) => t.items?.length), m = !v && b && z(f) && f > 1 && k >= f, w = m ? Math.min(Math.max(e.length, f), k) : 1, p = ({ label: t, link: o, icon: n, render: a, props: s }) => {
    let l = t;
    if (a)
      l = a({ label: t, link: o, props: s });
    else if (o && P(o)) {
      const c = o.startsWith("http") || o.startsWith("//"), $ = W(o) ? {} : {
        target: c ? "_blank" : "_self",
        rel: c ? "noreferrer noopener" : void 0
      };
      l = /* @__PURE__ */ r("a", { href: o, "aria-label": `Footer link for ${t}`, ...$, ...s, children: t });
    }
    return /* @__PURE__ */ d(M, { children: [
      n && /* @__PURE__ */ r(E, { icon: n, size: 20, sx: { mr: 0.5 } }),
      l
    ] });
  }, N = I(() => e?.length ? g ? e.map((t, o) => /* @__PURE__ */ r("span", { className: "footer-links-item", children: p(t) }, o)) : m ? T(e, { columns: w }).map((t, o) => /* @__PURE__ */ r("div", { className: "footer-links-column", children: t.filter((n) => n.group).map((n, a) => {
    const { items: s } = n;
    return /* @__PURE__ */ d("div", { className: "footer-links-group", children: [
      /* @__PURE__ */ r("span", { className: "footer-links-item", children: p(n) }),
      !!s?.length && /* @__PURE__ */ r("div", { className: "footer-links-sub", children: s.map((l, c) => /* @__PURE__ */ r(
        "span",
        {
          className: u("footer-links-item", { "footer-links-item--new": l.isNew }),
          children: p(l)
        },
        c
      )) })
    ] }, a);
  }) }, o)) : e.map((t, o) => {
    const { items: n } = t, a = o === x;
    return /* @__PURE__ */ d(
      "div",
      {
        className: u("footer-links-group", {
          "footer-links-group--active": a
        }),
        onClick: () => y(x === o ? -1 : o),
        children: [
          /* @__PURE__ */ d("span", { className: "footer-links-item", children: [
            p(t),
            !!n?.length && /* @__PURE__ */ r("span", { className: "footer-links-group-expand-icon", children: /* @__PURE__ */ r(
              A,
              {
                style: {
                  transform: `rotate(${a ? 180 : 0}deg)`
                }
              }
            ) })
          ] }),
          !!n?.length && /* @__PURE__ */ r("div", { className: "footer-links-sub", children: n.map((s, l) => /* @__PURE__ */ r("span", { className: u("footer-links-item", { "footer-links-item--new": s.isNew }), children: p(s) }, l)) })
        ]
      },
      o
    );
  }) : null, [e, g, m, x]);
  return e?.length ? /* @__PURE__ */ r(
    C,
    {
      columns: w,
      ...h,
      className: u(h.className, {
        "footer-links--grouped": b,
        "footer-links--flow": g,
        "footer-links--columns": m
      }),
      children: /* @__PURE__ */ r("div", { className: "footer-links-inner", children: N })
    }
  ) : null;
}
_.propTypes = {
  links: i.arrayOf(
    i.shape({
      label: i.string,
      link: i.string,
      render: i.func,
      props: i.object
    })
  ),
  // 流动布局, 简单的从左到右排列
  flowLayout: i.bool,
  // 列布局，最小列数，最大列数
  minColumns: i.number,
  maxColumns: i.number
};
const C = F("div", { shouldForwardProp: (e) => e !== "columns" })`
  overflow: hidden;
  color: ${({ theme: e }) => e.palette.text.secondary};
  .footer-links-inner {
    display: flex;
    justify-content: space-between;
    margin: 0 -8px;
  }
  .footer-links-group,
  .footer-links-sub {
    display: flex;
    flex-direction: column;
  }
  .footer-links-group-expand-icon {
    display: none;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translate(0, -50%);
    line-height: 1;
    svg {
      width: auto;
      height: 0.75em;
    }
  }
  .footer-links-item {
    display: inline-flex;
    align-items: center;
    position: relative;
    padding: 6px 8px;
    font-size: 14px;
    white-space: nowrap;
    &--new::after {
      content: 'New';
      color: ${({ theme: e }) => e.palette.info.main};
      background-color: ${({ theme: e }) => e.palette.info.light};
      padding: 1px 8px;
      border-radius: 10px/50%;
      margin-left: 8px;
    }
  }
  &.footer-links--grouped {
    .footer-links-group {
      > .footer-links-item {
        font-weight: 600;
        color: ${({ theme: e }) => e.palette.text.primary};
      }
      .footer-links-sub {
        margin-top: 8px;
      }
    }
  }
  a {
    display: inline-block;
    max-width: 150px;
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
    &:hover {
      color: ${({ theme: e }) => e.palette.text.primary};
    }
  }
  /* columns 布局 */
  &.footer-links--columns {
    .footer-links-inner {
      gap: ${({ columns: e }) => `${288 / e}px`};
    }
    .footer-links-column {
      display: flex;
      flex-direction: column;
    }
    .footer-links-group {
      .footer-links-sub {
        margin-top: 2px;
        margin-bottom: 12px;
      }
    }
  }

  /* flow 布局 */
  &.footer-links--flow {
    display: inline-flex;
    .footer-links-inner {
      justify-content: center;
      flex-wrap: wrap;
      margin: 0 -8px;
      .footer-links-item {
        padding: 0 8px;
      }
      .footer-links-item + .footer-links-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate(0, -50%);
        height: 1em;
        border-left: 1px solid ${(e) => e.theme.palette.text.secondary};
      }
    }
  }

  /* 移动端样式 */
  ${(e) => e.theme.breakpoints.down("md")} {
    .footer-links-inner {
      flex-direction: column;
      margin: 0;
    }
    .footer-links-sub {
      display: none;
    }
    .footer-links-group {
      position: relative;
      padding: 12px 0;
      .footer-links-item .footer-links-group-expand-icon {
        display: inline-block;
      }
    }
    .footer-links-group + .footer-links-group {
      border-top: 1px solid ${(e) => e.theme.palette.grey[200]};
    }
    .footer-links-group--active {
      .footer-links-sub {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .footer-links-item {
          flex: 0 0 50%;
        }
      }
    }
    .footer-links-item {
      padding-left: 0;
      padding-right: 0;
      font-size: 13px;
    }
    &.footer-links--grouped {
      .footer-links-group {
        > .footer-links-item {
          font-size: 14px;
        }
      }
    }

    &.footer-links--flow {
      .footer-links-inner {
        flex-direction: row;
      }
    }
  }
`;
export {
  _ as default
};
