/* eslint-disable no-unused-vars */
import React, { Component } from 'react';
import { Card, CardHeader, ListGroup, ListGroupItem } from 'reactstrap';

import TicketCard from '../ticketCard/TicketCard';
import './ListCardTickets.scss';

import axios from 'axios';

class ListCardTickets extends Component {
	constructor(props) {
		super(props);

		this.state = {
			tickets: []
		};
	}

	render() {
		return (
			<div>
				<Card style={{ width: '200%' }}>
					<CardHeader className={'cstm-card-header'}>All Tickets</CardHeader>
					<ListGroup variant="flush">
						{this.state.tickets.map((value) => {
							return <ListGroupItem className={'cstm-list-item'}><TicketCard id={value.id} name={value.name} states={value.states} /></ListGroupItem>;
						})}
					</ListGroup>
				</Card>
			</div>
		);
	}

	async componentDidMount() {
		await axios.get('/api/tickets/states')
			.then((response) => {
				let tickets = [];

				for (let itr in response.data) {
					let ticketId = response.data[itr].ticketId;
					if (tickets[ticketId] == null)
						tickets[ticketId] = {
							id: ticketId,
							name: response.data[itr].Board.name,
							fields: [response.data[itr].TicketSchema.name]
						};
					else
						tickets[ticketId].states.push(response.data[itr].StateSchema.name);
				}

				let temp = this.state;
				temp.tickets = tickets;

				this.setState(temp);
			})
			.catch(err => {
				console.log(err);
				return null;
			});
	}
}
export default ListCardTickets;