// 3rd-Party Libraries
import React from 'react';
import PropTypes from 'prop-types';

// Components
import { Flex, Title } from '@ui/components';
import { Log } from '@ui/compositions';

// Style
import classes from './style.module.scss';

const StagingFeed = props => {
  const { timelineContent, displayingDeployed, title } = props;

  const getChangelogStuff = changelogs => {
    return changelogs.map((changelog, i) => {
      return (
        <Log key={i} className={classes['StagingFeed-Timeline-Day-Log_Owlet']} logData={changelog} logType="Owlet" />
      );
    });
  };

  const getAuditlogStuff = auditlogs => {
    return auditlogs.map((auditlog, i) => {
      return (
        <Log
          key={i}
          className={classes['StagingFeed-Timeline-Day-Log_AuditLog']}
          logData={auditlog}
          logType="AuditLog"
        />
      );
    });
  };

  const dateOptions = {
    month: 'long',
    day: 'numeric',
    year: 'numeric',
  };

  let timeline;

  if (timelineContent.length > 0) {
    timeline = timelineContent.map((item, i) => {
      const { date, changelogs, auditlogs } = item;
      const changelogStuff = getChangelogStuff(changelogs);
      const auditlogStuff = getAuditlogStuff(auditlogs);

      return (
        <div key={i} className={classes['StagingFeed-Timeline-Day']}>
          <Flex align="center" className={classes['StagingFeed-Timeline-Day-Date']} justify="between">
            <span>{new Intl.DateTimeFormat('en-US', dateOptions).format(new Date(date))}</span>
          </Flex>
          {changelogStuff}
          {auditlogStuff}
        </div>
      );
    });
  } else if (!displayingDeployed) {
    timeline = (
      <div className={classes['StagingFeed-Timeline-Day']}>
        <div className={classes['StagingFeed-Timeline-Day-Date']}>
          {new Intl.DateTimeFormat('en-US', dateOptions).format(new Date())}
        </div>
      </div>
    );
  } else {
    timeline = (
      <div className={classes['StagingFeed-Timeline-Day']}>
        <div className={classes['StagingFeed-Timeline-Day-Date']}>
          {new Intl.DateTimeFormat('en-US', dateOptions).format(new Date())}
        </div>
        <div className={classes['StagingFeed-Timeline-Day-Deployed_empty']}>No deployment history</div>
      </div>
    );
  }

  return (
    <div
      className={
        // eslint-disable-next-line dot-notation
        displayingDeployed ? [classes.StagingFeed, classes['StagingFeed_deployed']].join(' ') : classes.StagingFeed
      }
    >
      <div className={classes['StagingFeed-Inner']}>
        <Flex className={classes['StagingFeed-Timeline']}>
          <Title className={classes['StagingFeed-Timeline-Heading']} level={5}>
            {title}
          </Title>
          <Flex className={classes['StagingFeed-Timeline-Content']} layout="col">
            {timeline}
          </Flex>
        </Flex>
      </div>
    </div>
  );
};

StagingFeed.propTypes = {
  displayingDeployed: PropTypes.bool,
  timelineContent: PropTypes.array.isRequired,
  title: PropTypes.string,
};

export default StagingFeed;
