import React from 'react';
import getCompliedClassName from '../../utils/getCompliedClassName';
import Group from '../group/Group';
import BreadCrumbItem from './BreadCrumbItem';
import style from './BreadCrumbs.module.css';

export default function BreadCrumbsSkeleton(props) {
  let {
    children,
    customId,
    seperator,
    items,
    onSelect,
    active,
    customClassName,
    visited,
    isFrontSeperator,
    size,
    isEllipsis,
    iscollapse,
    onCollapse,
    maxItems,
    direction,
    align,

    ariaLabel,
    role,
    tabIndex,

    tagAttributeProps
  } = props;
  let displayItems = [],
    dI = [];
  let classes = getCompliedClassName(customClassName, {
    [style.base]: true
  });
  let list = getCompliedClassName(
    customClassName,
    {
      [style.flex]: true
    },
    {
      [customClassName.alignment]: customClassName.alignment,
      [customClassName.wrap]: customClassName.wrap
    }
  );
  if (children) {
    React.Children.toArray(children).map((child, index) => {
      if (index <= visited) {
        if (child && child.type === BreadCrumbItem) {
          child &&
            displayItems.push(
              React.cloneElement(child, {
                active: index == active ? true : false,
                key: index,
                onClick: onSelect,
                itemIndex: index,
                size,
                isEllipsis,
                customDataId: customId.item ? `${customId.item}_{id}` : ""
              })
            );
        } else {
          child &&
            displayItems.push(
              React.cloneElement(child, {
                key: index
              })
            );
        }
      }
    });
  } else if (items.length > 0) {
    items.map((child, index) => {
      if (index <= visited) {
        displayItems.push(
          <BreadCrumbItem
            key={index}
            active={index == active ? true : false}
            onClick={onSelect}
            text={child.text}
            itemIndex={index}
            href={child.url}
            itemId={index + 1}
            dataId={customId + index}
            size={size}
            isEllipsis={isEllipsis}
          />
        );
      }
    });
  }

	if (iscollapse) {
		dI.push(displayItems[0]);
		if (maxItems > 1 && maxItems < displayItems.length - 1) {
			for (
				let index = displayItems.length - 1;
				index > displayItems.length - maxItems;
				index--
			) {
				const element = displayItems[index];
				dI.splice(1, 0, element);
			}
		}

		dI.splice(1,0,<BreadCrumbItem text={"..."} onClick={onCollapse} dataId={customId} />);
	}
  return (
    <nav
      aria-label={ariaLabel}
      className={classes}
      tabIndex={tabIndex}
      role={role}
      {...tagAttributeProps}
    >
      <Group
        tagName="ol"
        seperator={seperator}
        isFrontSeperator={isFrontSeperator}
        seperatorTagName={"li"}
        direction={direction}
        align={align}
      >
        {iscollapse ? dI : displayItems}
      </Group>
    </nav>
  );
}
