// DashboardBreadcrumb.js
import { Breadcrumb, Button, Flex, Space } from 'antd'
import { Link, useLocation, useNavigate } from 'react-router-dom'
import ArrowLeftIcon from '../../Icons/ArrowLeftIcon'
import ArrowRightIcon from '../../Icons/ArrowRightIcon'
import FilterIcon from '../../Icons/FilterIcon'
import { getModelByPluralName } from '../../../database/ObjectModels'
import { useTableState } from '../context/TableStateContext'

const breadcrumbNameMap = {
  production: 'Production',
  inventory: 'Inventory',
  management: 'Management',
  developer: 'Developer',
  finance: 'Finance',
  sales: 'Sales',
  overview: 'Overview',
  info: 'Info',
  design: 'Design',
  control: 'Control',
  preview: 'Preview',
  settings: 'Settings',
  about: 'About'
}

const mainSections = ['production', 'inventory', 'management', 'developer']

const DashboardBreadcrumb = () => {
  const location = useLocation()
  const navigate = useNavigate()
  const { hasPageFilter, hasStoredFilter } = useTableState()
  const pathSnippets = location.pathname.split('/').filter((i) => i)

  function segmentToModel(segment) {
    if (segment) {
      // Otherwise, get the model as is
      return getModelByPluralName(segment, true)
    }
    return null
  }

  const breadcrumbItems = pathSnippets.map((segment, index) => {
    const url = `/${pathSnippets.slice(0, index + 1).join('/')}`
    if (segment !== 'dashboard') {
      const isMainSection = mainSections.includes(segment)
      const model = segmentToModel(segment)
      const modelLabelPlural = model?.labelPlural ? model.labelPlural : null
      const name = breadcrumbNameMap[segment] || modelLabelPlural || segment
      const showFilterIcon =
        hasPageFilter(url) ||
        (model?.name && model.name !== 'unknown' && hasStoredFilter(model.name))
      if (isMainSection) {
        return {
          title: (
            <span style={{ padding: '0 12px' }} key={segment}>
              {name}
            </span>
          ),
          key: segment
        }
      }

      return {
        title: (
          <Link
            to={url}
            style={{
              padding: '0 12px',
              display: 'inline-flex',
              alignItems: 'center',
              gap: 6
            }}
          >
            {name}
            {showFilterIcon && <FilterIcon style={{ fontSize: 12 }} />}
          </Link>
        ),
        key: url
      }
    } else {
      return {}
    }
  })

  return (
    <Flex align='center' gap={'small'}>
      <Flex gap={'small'}>
        <Space.Compact>
          <Button
            type='text'
            icon={<ArrowLeftIcon style={{ fontSize: '14px' }} />}
            onClick={() => navigate(-1)}
            style={{ padding: '0 2px', height: '22px' }}
          />
          <Button
            type='text'
            icon={<ArrowRightIcon style={{ fontSize: '14px' }} />}
            onClick={() => navigate(1)}
            style={{ padding: '0 2px', height: '22px' }}
          />
        </Space.Compact>
      </Flex>
      <Breadcrumb items={breadcrumbItems} />
    </Flex>
  )
}

export default DashboardBreadcrumb