import { memo } from 'react';

import MuiGrid from '@mui/material/Grid';
import { GridProps as MuiGridProps } from '@mui/material/Grid';
import { styled } from '@mui/material/styles';

import { ASSETS_URL } from '../../../consts/common';
import { CustomIcon } from '../../custom-icon';
import type { Theme } from '../../@styles/theme-provider';

const StyledTreeStructure = styled(MuiGrid, { label: 'TreeStructure' })(
  ({ theme }: { theme: Theme }) => ({
    position: 'absolute',
    top: theme.spacing(1.75),
    left: theme.spacing(3.5),
    zIndex: 3,
    display: 'flex',
    flexDirection: 'column'
  })
);

const StyledTreeTrunk = styled('div', { label: 'TreeTrunk' })(({ theme }: { theme: Theme }) => ({
  position: 'absolute',
  top: theme.spacing(-4.25),
  maxHeight: theme.spacing(4),
  overflow: 'hidden'
}));

const StyledTreeBranch = styled(CustomIcon, { label: 'TreeBranch' })(
  ({ theme }: { theme: Theme }) => ({
    position: 'relative',
    zIndex: 0,
    overflow: 'visible',
    color: theme.palette.primary[100],
    '& > div': {
      width: 'auto !important',
      height: 'auto !important'
    },
    '& .injected-svg': {
      width: theme.spacing(4.625)
    },
    '&:before': {
      position: 'absolute',
      bottom: theme.spacing(-0.375),
      left: theme.spacing(3.625),
      width: theme.spacing(1),
      height: theme.spacing(1),
      content: "''",
      backgroundColor: theme.palette.secondary[500],
      borderRadius: '50%'
    }
  })
);

interface TreeStructureProps extends MuiGridProps {
  innerTableRows?: unknown[];
}

const TreeStructure = ({ innerTableRows, ...props }: TreeStructureProps) => (
  <StyledTreeStructure {...props}>
    <StyledTreeTrunk>
      <StyledTreeBranch color="inherit" src={`${ASSETS_URL}/elements/icon_childLong.svg`} />
    </StyledTreeTrunk>
    {innerTableRows?.map((row, index) => (
      <StyledTreeBranch
        key={index}
        color="inherit"
        src={`${ASSETS_URL}/elements/icon_childLong.svg`}
      />
    ))}
  </StyledTreeStructure>
);

const m = memo(TreeStructure);
export { m as TreeStructure };