import { useResourceStore } from '@kevisual/resources/pages/store/resource';
import { Breadcrumbs, Typography } from '@mui/material';
import clsx from 'clsx';
import { useMemo } from 'react';

export const PrefixRedirect = () => {
  const { prefix, onOpenPrefix } = useResourceStore();
  const prefixCom = useMemo(() => {
    const _prefix = prefix.split('/').filter(Boolean);
    return _prefix.map((item, index) => {
      const path = _prefix.slice(0, index + 1).join('/');
      const onClick = () => {
        console.log('path', path);
        const openPath = path + '/';
        if (openPath !== prefix) {
          onOpenPrefix(openPath);
        }
      };
      return {
        name: item,
        path,
        onClick: index > 0 ? onClick : undefined,
      };
    });
  }, [prefix]);
  return (
    <Breadcrumbs>
      {prefixCom.map((item) => (
        <Typography variant='h5' key={item.name} className={clsx({ 'cursor-pointer': item.onClick })} onClick={item.onClick}>
          {item.name}
        </Typography>
      ))}
    </Breadcrumbs>
  );
};
