import React from 'react';

import {
  Timeline,
  TimelineConnector,
  TimelineContent,
  TimelineDot,
  TimelineItem,
  timelineItemClasses,
  TimelineSeparator,
} from '@mui/lab';
import { Typography } from '@mui/material';

import { ThemeOptions, useTheme } from '@mui/material/styles';
import styled from 'styled-components';

export interface TimeLineData {
  date: string;
  description?: string;
  children?: React.ReactNode;
}

interface TimeLineProps {
  data: TimeLineData[];
  theme?: ThemeOptions;
}

  export const TimeLine: React.FC<TimeLineProps> = ({ data }) => {

  const muiTheme = useTheme();

  const NormaTimeLine = styled(Timeline)`
    .${timelineItemClasses.root} {
      padding: 0;
      &:before {
        flex: 0;
        padding: 0;
      }
    }

    .MuiTimelineDot-root {
      &:last-child {
        &:before {
          content: '';
          width: 70%;
          height: 70%;
          background: ${muiTheme.palette.primary.main};
          position: absolute;
          border-radius: 50%;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
  `;

  const _getDotStyle = (last: boolean) => {
    const style = {
      background: 'none',
      boxShadow: 'none',
      padding: '6px',
      margin: '0',
      border: `3px solid ${muiTheme.palette.primary.main}`,
    };

    const lastStyle = {
      padding: '8px',
      position: 'relative',
      left: '-2px',
    };

    return last ? { ...style, ...lastStyle } : style;
  };

  return (
    <NormaTimeLine sx={{ padding: '0' }}>
      {data.map((item, key) => {
        const last = key !== data.length - 1;
        return (
          <TimelineItem key={key} sx={{ minHeight: 'auto' }}>
            <TimelineSeparator>
              <TimelineDot sx={_getDotStyle(!last)} />
              {last && <TimelineConnector sx={{ bgcolor: muiTheme.palette.primary.main, width: '5px' }} />}
            </TimelineSeparator>
            <TimelineContent sx={{ py: 0, pl: 2, pb: '35px' }}>
              <Typography sx={{ m: 'auto 0' }} className="TimelineContent__Date" variant="body1">
                {item.date}
              </Typography>
              {item.description && (
                <Typography sx={{ m: 'auto 0' }} className="TimelineContent__Description" variant="body2">
                  {item.description}
                </Typography>
              )}
              {item.children}
            </TimelineContent>
          </TimelineItem>
        );
      })}
    </NormaTimeLine>
  );
};