import React from 'react';
import {Container, Table, Button, Label} from 'semantic-ui-react';
import LogItem from './LogItem';

class LogPage extends React.Component {
	
	componentDidMount(){
		this.props.getList();
		this.props.router.setRouteLeaveHook(this.props.route, () => {
			this.props.clearList();
		})
	}

	loadPage = (p = 1) => {
		this.props.getList(p);
	}

	render () {
		let {i18n, list, page} = this.props;
		return (
			<Container>
				<Table>
					<Table.Header>
						<Table.Row>
							<Table.HeaderCell>{i18n&&i18n.t ? i18n.t('page.log.table.datetime') : ''}</Table.HeaderCell>
							<Table.HeaderCell>{i18n&&i18n.t ? i18n.t('page.log.table.username') : ''}</Table.HeaderCell>
							<Table.HeaderCell>{i18n&&i18n.t ? i18n.t('page.log.table.status') : ''}</Table.HeaderCell>
							<Table.HeaderCell>{i18n&&i18n.t ? i18n.t('page.log.table.event') : ''}</Table.HeaderCell>
							<Table.HeaderCell>{i18n&&i18n.t ? i18n.t('page.log.table.description') : ''}</Table.HeaderCell>
						</Table.Row>
					</Table.Header>
					<Table.Body>
						{ list.map(t => <LogItem key={t.jciocertuid} i18n={i18n} data={t} />) }
					</Table.Body>
				</Table>
				<div style={{textAlign: 'center'}}>
					<Button content={i18n&&i18n.t ? i18n.t('page.log.table.button.prevpage') : ''} size="small" labelPosition="left" basic={true} color="black" icon="arrow left" onClick={() => {this.loadPage(page.prevpage)}} />
					<Label basic={true} color="blue" content={`${page.page || 1} / ${page.totalpage || 1}`} />
					<Button content={i18n&&i18n.t ? i18n.t('page.log.table.button.nextpage') : ''} size="small" labelPosition="right" basic={true} color="black" icon="arrow right" onClick={() => {this.loadPage(page.nextpage)}} />
				</div>
			</Container>
		)
	}
}

export default LogPage;