class TableHeaderWithSorting extends React.Component {
    createSortHandler = property => event => {
        this.props.onRequestSort(event, property);
    };

    render() {
        const {order, orderBy, columnData} = this.props;

        return (
            <TableHead>
                <TableRow>
                    {columnData.map(column => {
                        return (
                            <TableCell
                                key={column.id}
                                numeric={column.numeric}
                                padding={column.disablePadding ? 'none' : 'default'}
                                sortDirection={orderBy === column.id ? order : false}
                            >
                                <Tooltip
                                    title="Отсортировать"
                                    placement={column.numeric ? 'bottom-end' : 'bottom-start'}
                                    enterDelay={300}
                                >
                                    <TableSortLabel
                                        active={orderBy === column.id}
                                        direction={order}
                                        onClick={this.createSortHandler(column.id)}
                                    >
                                        {column.label}
                                    </TableSortLabel>
                                </Tooltip>
                            </TableCell>
                        );
                    }, this)}
                </TableRow>
            </TableHead>
        );
    }
}

class OrganizationsTable extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            dataSource: [],
            columnData: [{id: 'bin', numeric: true, disablePadding: false, label: 'БИН'},
                {id: 'fullName', numeric: false, disablePadding: false, label: 'Полное название'},
                {id: 'shortName', numeric: false, disablePadding: false, label: 'Сокращённое название'},
                {id: 'organizationType', numeric: false, disablePadding: false, label: 'Тип'},
                {id: 'registrationDate', numeric: false, disablePadding: false, label: 'Дата регистрации'},
                {id: 'primaryEconomicActivity', numeric: false, disablePadding: false, label: 'Основная деятельность'},
                {id: 'founder', numeric: false, disablePadding: false, label: 'Учредитель'},
                {id: 'address', numeric: false, disablePadding: false, label: 'Адрес'},
                {id: 'phoneNumber', numeric: false, disablePadding: false, label: 'Номер телефона'},
                {id: 'taxesCommittee', numeric: false, disablePadding: false, label: 'Налоговый комитет'}],
            order: 'asc',
            orderBy: 'fullName',
            page: 0
        }
    }

    componentDidMount() {
        this.fetchData(this.state.page);
    }

    handleRequestSort = (event, property) => {
        const orderBy = property;
        let order = 'desc';

        if (this.state.orderBy === property && this.state.order === 'desc') {
            order = 'asc';
        }

        const dataSource =
            order === 'desc'
                ? this.state.dataSource.sort((a, b) => (b[orderBy] < a[orderBy] ? -1 : 1))
                : this.state.dataSource.sort((a, b) => (a[orderBy] < b[orderBy] ? -1 : 1));

        this.setState({ dataSource, order, orderBy });
    };

    fetchData(page) {
        Api.getOrganizations(page).then(response => {
            let dataSource = [];
            response.data.forEach(element => {
                dataSource.push(element);
            });
            this.setState({dataSource: dataSource});
        })
    }

    render() {
        const { dataSource, order, orderBy, page, columnData} = this.state;
        let paperStyle = {
            width: '100%',
            overflowX: 'auto',
        };

        return <Paper style={paperStyle}>
            <div>
                <Table>
                    <TableHeaderWithSorting order={order}
                                            orderBy={orderBy}
                                            columnData={columnData}
                                            onRequestSort={this.handleRequestSort}
                    />
                    <TableBody>
                        {dataSource.map(organization => {
                            return (
                                <TableRow key={organization.bin}>
                                    <TableCell numeric>{organization.bin}</TableCell>
                                    <TableCell>{organization.fullName}</TableCell>
                                    <TableCell>{organization.shortName !== null ? organization.shortName : '-'}</TableCell>
                                    <TableCell>{organization.organizationType.name}</TableCell>
                                    <TableCell>{organization.registrationDate}</TableCell>
                                    <TableCell>{organization.primaryEconomicActivity.name}</TableCell>
                                    <TableCell>{organization.founder}</TableCell>
                                    <TableCell>{organization.address}</TableCell>
                                    <TableCell>{organization.phoneNumber}</TableCell>
                                    <TableCell>{organization.taxesCommittee.name}</TableCell>
                                </TableRow>
                            )
                        })}
                    </TableBody>
                </Table>
            </div>
        </Paper>
    }
}