import React, { useState, memo } from 'react';
import { makeStyles, Typography } from '@material-ui/core';
import { TimelineDateBar } from './TimelineDateBar';
import { TimelineTokenSummary } from './TimelineTokenSummary';
import { TimelineStatus } from './TimelineStatus';
import { TimelineHoverCard } from './TimelineHoverCard';
import { LayoutUnit } from '../../../layout/LayoutUnit';
import PropTypes from 'prop-types'; // import PropTypes
const useStyles = makeStyles((theme) => ({
    root: {},
    wrapper: {
        display: 'flex',
        flexDirection: 'column',
        alignContent: 'space-between',
        alignItems: 'center'
    },
    label: { width: 46, textAlign: 'center' }
}));
// eslint-disable-next-line react/display-name
export const TimelineNode = memo((props) => {
    const [hover, setHover] = useState(false);
    const { data, height = 187, details = true, show = false, width, dot, iconColor, dotColor, test, icon } = props;
    const classes = useStyles(props);
    const maxLineLength = 8;
    const maxLines = 2;
    const capitalizeFirstLetter = (str) => {
        return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
    };
    const formatString = (str) => {
        let formattedStr = '';
        let lineCount = 0;
        let words = str.split(' ');
        for (let i = 0; i < words.length && lineCount < maxLines; i++) {
            let line = '';
            while (i < words.length &&
                line.length + words[i].length <= maxLineLength) {
                line += capitalizeFirstLetter(words[i]) + ' ';
                i++;
            }
            if (line.length > maxLineLength) {
                line = line.slice(0, maxLineLength - 3) + '...';
            }
            formattedStr += line.trim() + '\n';
            lineCount++;
            i--;
        }
        return formattedStr.trim();
    };
    return (React.createElement("div", { onMouseDownCapture: () => setHover(!hover), className: classes.root, style: { background: details && 'whitesmoke', width: width } }, React.createElement("div", null, test, " "), data.map((item) => {
        return (React.createElement("div", null, (hover || show) && (React.createElement(TimelineHoverCard, { offset: 0 }, React.createElement("div", null, React.createElement(Typography, { variant: "h6" }, item.details.shortDescription)), React.createElement("div", null, item.details.data1 ? (React.createElement(Typography, { variant: "caption" }, item.details.data1)) : (React.createElement(TimelineStatus, { status: item.details.data2 }))), React.createElement("div", null, React.createElement(Typography, { variant: "caption" }, item.details.date)), React.createElement("div", null, React.createElement(Typography, { variant: "caption" }, item.details.data3)))), React.createElement("div", { className: classes.wrapper, style: { height: height - 4 } }, React.createElement("div", { style: { marginRight: -8 } }, React.createElement(TimelineTokenSummary, { dot: dot, color: dotColor, relative: true, timelineItem: item.details.transactionType, iconColor: iconColor, 
            //timelineItem="Email"
            icon: icon, removeHeight: true })), React.createElement("div", { className: classes.label, style: { marginTop: !details && -3 } }, dot && (React.createElement(Typography, { variant: "subtitle2", style: { lineHeight: '0.9rem' } }, formatString(item.details.shortDescription)))), details && React.createElement(LayoutUnit, { unit: "nudge" }), details && (React.createElement("div", { className: classes.wrapper }, React.createElement("div", null, item.details.data1 &&
            item.details.data1.toString().trim() !== '' ? (React.createElement(Typography, { variant: "caption" }, item.details.data1)) : (React.createElement(TimelineStatus, { status: Number(item.details.data2) }))), React.createElement("div", null, React.createElement(Typography, { variant: "caption" }, item.details.date)), React.createElement("div", null, React.createElement(Typography, { variant: "caption" }, item.details.data3))))), details && (React.createElement("div", null, React.createElement(TimelineDateBar, { month: Number(item.date.toString().charAt(0)) })))));
    })));
});
// Define propTypes
TimelineNode.propTypes = {
    data: PropTypes.array.isRequired,
    height: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
    details: PropTypes.bool,
    show: PropTypes.bool,
    width: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.number,
        PropTypes.bool
    ]),
    dot: PropTypes.bool,
    iconColor: PropTypes.string,
    dotColor: PropTypes.string,
    test: PropTypes.string,
    icon: PropTypes.element
};
//# sourceMappingURL=TimelineNode.js.map