{"version":3,"sources":["../src/components/elements/XBreadcrumb.tsx"],"names":["React","Breadcrumbs","Link","Typography","isEqual","useSetRecoilState","HomeOutlined","compareProps","prevProps","nextProps","XBreadcrumb","config","breakpoint","useBreakpoint","env","XLink","useXoraiaValue","xElement","useXElement","setSelectedElement","USE_SELECTED_INDEX","value","valueAtBreakPoint","getValueOnBreakpoint","devProps","e","clickHandler","separator","bgColor","border","borderRadius","fontFamily","fontSize","linkColor","linkDecoration","linkHoverColor","linkHoverDecoration","showHomeIcon","showHomeLabel","textColor","width","height","padding","margin","generateSide","generateBorder","generateRadius","XBreadcrumb_default"],"mappings":"wSAAA,UAAYA,MAAW,QACvB,OAAS,eAAAC,EAAa,QAAAC,EAAM,cAAAC,MAAkB,gBAC9C,OAAS,WAAAC,MAAe,SAMxB,OAAS,qBAAAC,MAAyB,SAWlC,OAAS,gBAAAC,MAAoB,sBAE7B,IAAMC,EAAe,CAACC,EAAgBC,IAC7BL,EAAQI,EAAWC,CAAS,EAG/BC,EAAgD,OACpD,CAAC,CAAE,OAAAC,EAAS,CAAC,CAAoB,IAAM,CAErC,IAAMC,EAAaC,EAAc,EAE3B,CAAE,IAAAC,EAAK,KAAMC,CAAM,EAAIC,EAAe,EAGtC,CAAE,SAAAC,CAAS,EAAIC,EACnBP,EAAO,KACT,EAGMQ,EAAqBd,EAAkBe,CAAkB,EAG/D,GAAI,CAACH,GAAY,OAAO,KAAKA,CAAQ,EAAE,SAAW,EAAG,OAAO,KAG5D,GAAM,CAAE,MAAAI,CAAM,EAAIJ,EAGZK,EAAoBC,EACxBF,EACAT,CACF,EAEMY,EAAW,CACf,GAAIb,EAAO,MACX,QAAUc,GAAWC,EAAaD,EAAGN,EAAoBR,EAAO,KAAK,CACvE,EAEM,CAEJ,UAAAgB,EAAY,IACZ,QAAAC,EACA,OAAAC,EACA,aAAAC,EACA,WAAAC,EACA,SAAAC,EACA,UAAAC,EACA,eAAAC,EACA,eAAAC,EACA,oBAAAC,EACA,aAAAC,EACA,cAAAC,EAAgB,GAChB,UAAAC,EAGA,MAAAC,EACA,OAAAC,EACA,QAAAC,EACA,OAAAC,CAEF,EAAIrB,EAEJ,OACE,gBAACrB,EAAA,CACE,GAAIa,IAAQ,OAASU,EACtB,UAAWG,EACX,GAAI,CACF,WAAY,SACZ,GAAGL,EACH,QAASsB,EAAa,UAAWF,CAAO,EACxC,OAAQE,EAAa,SAAUD,CAAM,EACrC,MAAAH,EACA,OAAAC,EACA,QAASb,EACT,OAAQiB,EAAehB,CAAM,EAC7B,aAAciB,EAAehB,CAAY,EACzC,WAAAC,EACA,SAAAC,EACA,MAAOO,EAEP,MAAO,CACL,MAAON,EACP,eAAgBC,GAAkB,OAElC,UAAW,CACT,MAAOC,EACP,eAAgBC,CAClB,CACF,CACF,GAEA,gBAAClC,EAAA,CACC,UAAWa,EACX,KAAK,IACL,GAAI,CAAE,QAAS,OAAQ,WAAY,QAAS,GAE3CsB,GAAgB,gBAAC/B,EAAA,CAAa,GAAI,CAAE,SAAU,SAAU,EAAG,EAC3DgC,GACC,gBAACnC,EAAA,CACC,UAAU,OACV,GAAIkC,EAAe,GAAM,EACzB,GAAI,CACF,SAAU,UACV,MAAO,UACP,WAAY,UACZ,WAAY,SACd,GACD,MAED,CAEJ,EACA,gBAACnC,EAAA,CAAK,UAAWa,EAAO,KAAK,SAAQ,QAErC,EACA,gBAACZ,EAAA,CACC,GAAI,CACF,SAAU,UACV,MAAO,UACP,WAAY,UACZ,WAAY,SACd,GACD,QAED,CACF,CAEJ,EACAI,CACF,EAEOwC,GAAQrC","sourcesContent":["import * as React from \"react\";\nimport { Breadcrumbs, Link, Typography } from \"@mui/material\";\nimport { isEqual } from \"lodash\";\n\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport { useXoraiaValue } from \"../../hooks/useXoraia\";\nimport { TUseXElement, useXElement } from \"../../hooks/useXElement\";\nimport { USE_SELECTED_INDEX } from \"../../hooks/useSelectedElement\";\nimport { useSetRecoilState } from \"recoil\";\nimport { getValueOnBreakpoint } from \"../../lib/getValueOnBreakpoint\";\nimport { clickHandler } from \"../../lib/clickHandler\";\nimport { XElementConfig } from \"../../utils/interfaces/Elements/XElement.interfaces\";\nimport { generateSide } from \"../../lib/generateSide\";\nimport {\n  IXBreadcrumbProps,\n  XBreadcrumbProps,\n} from \"../../utils/interfaces/Elements/XBreadcrumb.interfaces\";\nimport { generateBorder } from \"../../lib/generateBorder\";\nimport { generateRadius } from \"../../lib/generateRadius\";\nimport { HomeOutlined } from \"@mui/icons-material\";\n\nconst compareProps = (prevProps: any, nextProps: any) => {\n  return isEqual(prevProps, nextProps);\n};\n\nconst XBreadcrumb: React.FC<XBreadcrumbProps> = React.memo(\n  ({ config = {} as XElementConfig }) => {\n    // WE TRACK THE BREAK POINTS CHANGES\n    const breakpoint = useBreakpoint();\n\n    const { env, Link: XLink } = useXoraiaValue();\n\n    // WE ARE GETTING THE CURRENT ELEMENT FROM THE ATOM FAMILY\n    const { xElement } = useXElement<TUseXElement<IXBreadcrumbProps>>(\n      config.index\n    );\n\n    // GARBING THE INDEX UPDATER FOR GENERAL USAGE\n    const setSelectedElement = useSetRecoilState(USE_SELECTED_INDEX);\n\n    // IF WE DONT HAVE THIS ELEMENT CONFIGS ADDED WE DON'T SHOW IT\n    if (!xElement || Object.keys(xElement).length === 0) return null;\n\n    // WE GET ALL DEVICES PROPS AS VALUE\n    const { value } = xElement;\n\n    // WE NOW USE THE CURRENT BREAKPOINT VALUE ON THIS ELEMENT\n    const valueAtBreakPoint = getValueOnBreakpoint<IXBreadcrumbProps>(\n      value as any,\n      breakpoint\n    );\n\n    const devProps = {\n      id: config.index,\n      onClick: (e: any) => clickHandler(e, setSelectedElement, config.index),\n    };\n\n    const {\n      // path = \"/categories/[slug]\",\n      separator = \"/\",\n      bgColor,\n      border,\n      borderRadius,\n      fontFamily,\n      fontSize,\n      linkColor,\n      linkDecoration,\n      linkHoverColor,\n      linkHoverDecoration,\n      showHomeIcon,\n      showHomeLabel = true,\n      textColor,\n      // showHomeIcons = false,\n      // showHomeLabel = true,\n      width,\n      height,\n      padding,\n      margin,\n      // TODO IMPLEMENT BORDER RADIUS\n    } = valueAtBreakPoint;\n\n    return (\n      <Breadcrumbs\n        {...(env === \"dev\" && devProps)}\n        separator={separator}\n        sx={{\n          alignItems: \"center\",\n          ...valueAtBreakPoint,\n          padding: generateSide(\"padding\", padding),\n          margin: generateSide(\"margin\", margin),\n          width,\n          height,\n          bgcolor: bgColor,\n          border: generateBorder(border),\n          borderRadius: generateRadius(borderRadius),\n          fontFamily,\n          fontSize,\n          color: textColor,\n\n          \"& a\": {\n            color: linkColor,\n            textDecoration: linkDecoration ?? \"none\",\n\n            \"&:hover\": {\n              color: linkHoverColor,\n              textDecoration: linkHoverDecoration,\n            },\n          },\n        }}\n      >\n        <Link\n          component={XLink}\n          href=\"/\"\n          sx={{ display: \"flex\", alignItems: \"center\" }}\n        >\n          {showHomeIcon && <HomeOutlined sx={{ fontSize: \"inherit\" }} />}\n          {showHomeLabel && (\n            <Typography\n              component=\"span\"\n              ml={showHomeIcon ? 0.5 : 0}\n              sx={{\n                fontSize: \"inherit\",\n                color: \"inherit\",\n                fontWeight: \"inherit\",\n                fontFamily: \"inherit\",\n              }}\n            >\n              Home\n            </Typography>\n          )}\n        </Link>\n        <Link component={XLink} href=\"/page\">\n          Page 1\n        </Link>\n        <Typography\n          sx={{\n            fontSize: \"inherit\",\n            color: \"inherit\",\n            fontWeight: \"inherit\",\n            fontFamily: \"inherit\",\n          }}\n        >\n          Page 2\n        </Typography>\n      </Breadcrumbs>\n    );\n  },\n  compareProps\n);\n\nexport default XBreadcrumb;\n"]}