import React from 'react';
import './App.css';
import Timeline from './timeline';

class App extends React.Component<{}, { timelineDatails: any }> {
  constructor(props: any) {
    super(props);
    this.updateRecord.bind(this);
    this.state = {
      timelineDatails: [{
        titleMain: 'Approval',
        timelineIcon: '1',
        tlMemberU: 'LA HR Practitioner',
        tMemberG: '(Work group)',
        tMemberEmail: 'Approval Assignement Email',
        isOpen: true
      }, {
        titleMain: 'Approval',
        timelineIcon: '2',
        tlMemberU: 'LA Payroll Managers',
        tMemberG: '(Work group)',
        tMemberEmail: 'Approval Assignement Email',
        tinformation: 'Work group members who won\'t receive notifications',
        tNotifyEmail: 'Notification Email',
        isOpen: true
      }, {
        titleMain: 'Approval',
        timelineIcon: '3',
        tlMemberU: 'LA HR Practitioner',
        tMemberG: '(Work group)',
        tMemberEmail: 'Approval Assignement Email',
        isOpen: true
      },
      {
        titleMain: 'Approved',
        timelineIcon: '4',
        tlMemberU: 'Approval Process Completed',
        tMemberG: '(Personal Information Updated)',
        isOpen: true
      },
      ]
    };
  }
  updateRecord = (data: any) => {
    let tempTimeLine = this.state.timelineDatails.map((record: any) => {
      return (record === data) ? data : record;
    });
    this.setState({ timelineDatails: tempTimeLine });
  }
  render() {
    return (
      <div className="tabTimelineMain" > {
        this.state.timelineDatails.map((data: any, index: React.Key | null | undefined) => {
          return <Timeline key={index} updateRecord={this.updateRecord} timelineData={data} />
        })
      } </div>
    );
  }
}
export default App;