import React, { useEffect, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import classNames from 'clsx';
import NextLink from 'next/link';
import { ContentCopyRounded } from '@mui/icons-material';

import copyToClipboard from '@/modules/@common/helpers/copy';

import { Breadcrumbs, IconButton, Link, Skeleton, Stack, Tooltip, Typography } from '@/mui/components';

import styles from './Breadcrumbs.module.scss';

function LinkRouter(props) {
  return <Link {...props} component={NextLink} underline="hover" />;
}

function BreadcrumbsHeader({ info = null, ...props }) {
  const ref = useRef(null);
  const lastBreadcrumb = props.breadcrumbs[props.breadcrumbs.length - 1].label;

  const [showTooltip, setShowTooltip] = useState(false);

  useEffect(() => {
    const handleResize = () => {
      const breadcrumbs = ref.current;
      setShowTooltip(breadcrumbs.scrollWidth > breadcrumbs.offsetWidth);
    };

    handleResize();

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, [info]);

  return props.breadcrumbs?.length ? (
    <Breadcrumbs
      classes={{
        root: classNames(styles.Breadcrumbs, {
          [styles.Breadcrumbs_truncated]: showTooltip,
        }),
        ol: styles.BreadcrumbsList,
        li: styles.BreadcrumbsItem,
      }}
      separator=">"
      aria-label="breadcrumb"
      ref={ref}
    >
      {props.breadcrumbs
        .filter((_, i) => i !== props.breadcrumbs.length - 1)
        .map((item) => (
          <LinkRouter key={item.link} color="inherit" href={item.link}>
            {!item.label && <Skeleton variant="text" height={10} width={70} />}
            {item.label && (
              <Typography variant="subtitle2" fontWeight={400}>
                {item.label}
              </Typography>
            )}
          </LinkRouter>
        ))}

      <Stack alignItems="center" spacing={2}>
        {showTooltip ? (
          <Tooltip
            interactive="true"
            title={
              <Stack alignItems="center" direction="row">
                {lastBreadcrumb}
                <IconButton onClick={() => copyToClipboard(lastBreadcrumb)} size="small">
                  <ContentCopyRounded />
                </IconButton>
              </Stack>
            }
            placement="top-start"
            leaveDelay={1000}
          >
            <div>
              <Typography variant="subtitle2" color="text.primary" fontWeight={400} noWrap>
                {lastBreadcrumb}
              </Typography>
            </div>
          </Tooltip>
        ) : (
          <Typography variant="subtitle2" color="text.primary" fontWeight={400} noWrap>
            {lastBreadcrumb}
          </Typography>
        )}
      </Stack>
    </Breadcrumbs>
  ) : null;
}

BreadcrumbsHeader.propTypes = {
  breadcrumbs: PropTypes.arrayOf(
    PropTypes.shape({
      label: PropTypes.string,
      link: PropTypes.string,
    }),
  ).isRequired,
  info: PropTypes.shape({
    created: PropTypes.number,
    updated: PropTypes.number,
    updatedBy: PropTypes.string,
  }),
};

export default BreadcrumbsHeader;
