// 16-10-2024 

import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import { BreadcrumbData } from 'use-react-router-breadcrumbs';

// ICONS
import { Divider, styled, useTheme } from '@mui/material';
import { IoMdHome as HomeIcon } from 'react-icons/io';
import { MdOutlineArrowForwardIos as DividerIcon } from 'react-icons/md';

// STYLE
const breadcrumbAlignItem: React.CSSProperties = { display: 'flex', alignSelf: 'center' }
const breadcrumbLinkDecorationLight: React.CSSProperties = { textDecoration: 'none', color: '#166CC8' }
const breadcrumbLinkDecorationDark: React.CSSProperties = { textDecoration: 'none', color: '#CFD2D6' }
const colorUnlinkLight: React.CSSProperties = { color: '#606060' }
const colorUnlinkDark: React.CSSProperties = { color: '#C5C8CB' }

const BreadcrumbWrapperStyled = styled('div')(({ theme }) => ({
  display: 'flex',
  width: '100%',
  paddingBlock: 10,
  paddingInline: 10,
  boxSizing: 'border-box',
  [theme.breakpoints.up('sm')]: {
    paddingInline: 20,
  }
}))

export interface IBreadcrumbsBaseComponentProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
  homeRouteName: string,
  breadcrumbs: BreadcrumbData<string>[],
  unLink?: string[],
  ignoreRoutes?: string[],
  showBottomBorder?: boolean,
}

export const BreadcrumbsBaseComponent: React.FC<IBreadcrumbsBaseComponentProps> = ({ homeRouteName, breadcrumbs, unLink, ignoreRoutes, showBottomBorder, ...props }) => {
  const theme = useTheme()
  // const unLink = [
  //   '/bla',
  //   '/blabla'
  // ]

  const location = useLocation()

  const checkArrays = (arrayA: any[], arrayB: any[]) => arrayA.some(r => arrayB.indexOf(r) >= 0)

  return <>
    {/* <label style={{ background: 'green', color: 'white' }}>{homeRouteName}</label> */}
    <BreadcrumbWrapperStyled {...props}>
      {breadcrumbs.filter(b =>  !ignoreRoutes?.includes(b.match.pathname)).map((args, index) => {
        return <React.Fragment key={index}>
          {/* <label style={{ background: 'red', color: 'white' }}>{args.match.pathname}</label> */}
          {/* HOME */}
          {args.match.pathname == homeRouteName ?
            <Link style={breadcrumbAlignItem} to={args.match.pathname}>
              <HomeIcon style={{ ...breadcrumbAlignItem, color: theme.palette.mode == 'dark' ? '#CFD2D6' : '#166CC8', marginRight: 5 }} />
            </Link> : null}

          <span style={{ ...breadcrumbAlignItem }}>
            {/* ARROW DIVIDER */}
            {args.match.pathname != homeRouteName ?
              <DividerIcon style={{ ...breadcrumbAlignItem, margin: '0px 5px 0px 5px', color: theme.palette.mode == 'dark' ? '#CFD2D6' : '#505050' }} /> : null}

            {/* PATH/ROUTES NAMES */}
            {[':id', 'new'].includes(args.match.params.id ?? '') ? 'Novo' : location.pathname == args.match.pathname ?
              <div style={theme.palette.mode == 'dark' ? colorUnlinkDark : colorUnlinkLight}> {args.breadcrumb}</div> :
              checkArrays([args.match.pathname], unLink ?? []) ?
                <div style={theme.palette.mode == 'dark' ? colorUnlinkDark : colorUnlinkLight}>{args.match.route?.breadcrumb as string}</div> :
                <Link style={theme.palette.mode == 'dark' ? breadcrumbLinkDecorationDark : breadcrumbLinkDecorationLight} to={args.match.pathname}>{args.breadcrumb}</Link>}
          </span>
        </React.Fragment>
      })}
    </BreadcrumbWrapperStyled>

    {showBottomBorder == true && <Divider />}
  </>
}