class Employees extends ReportBase {
    constructor(props: any) {
        super(props);
        this.state = {
            employees: new wijmo.odata.ODataCollectionView(Util.getUrl(), 'Employees', {
                fields: ['EmployeeID', 'LastName', 'FirstName', 'Title', 'TitleOfCourtesy', 'BirthDate', 'HireDate', 'Address', 'City', 'Region', 'PostalCode', 'Country', 'HomePhone', 'Extension', 'Notes', 'ReportsTo'],
                groupDescriptions: ['Country', 'City'],
                sortDescriptions: ['Country', 'City']
            })
        };
    }

    render() {
        return <Spinner loading={this.state.loading}>
            <h1 style={{backgroundColor: '#c0c0c0', color: '#ffffff', paddingBottom: '.5em'}}>
                Employees
            </h1>

            <div style={{display: 'flex', fontWeight: 'bold', borderBottom: '2px solid #c0c0c0'}}>
                <div style={{width: '150px'}}>
                    Country
                </div>
                <div style={{width: '150px'}}>
                    City
                </div>
                <div style={{width: '200px'}}>
                    Address
                </div>
                <div style={{width: '150px'}}>
                    Home Phone
                </div>
            </div>
            {
                this.state.employees.groups.map((country, index) => {
                    return <EmployeesCountry country={country} key={index}/>
                })
            }
        </Spinner>
    }
}

class EmployeesCountry extends React.Component<any, any> {
    render() {
        return <div>
            <div style={{borderTop: '2px solid black', fontSize: '150%', fontWeight: 'bold', marginBottom: '12pt'}}>
                {this.props.country.name }
            </div>
            {
                this.props.country.groups.map((city, index) => {
                    return <EmployeesCity city={city} key={index}/>
                })
            }
        </div>
    }
}

class EmployeesCity extends React.Component<any, any> {
    render() {
        return <div>
            <div style={{fontWeight: 'bold', textDecoration: 'underline', marginLeft: '150px'}}>
                {this.props.city.name}
            </div>
            {
                this.props.city.items.map((employee, index) => {
                    return <EmployeesEmployee employee={employee} key={index}/>
                })
            }
        </div>
    }
}

class EmployeesEmployee extends React.Component<any, any> {

    getEmployeeImage(employee: any) {
        let images = [
            'burns/512448cb3.gif',
            'agnes/0c8adf467.png',
            'skinner/58d3283e7.png',
            'bob/5d7451cde.png',
            'flanders/db01ccc49.jpg',
            'lovejoy/5ec99ea6a.jpg',
            'apu/41fa40f90.png',
            'barney/f3b7b1de2.png',
            'luann/81d97cbd4.png',
            'troy/d5aa8e02c.jpg',
            'edna/2bade433d.jpg',
            'chalmers/89d0c32c6.jpg',
            'frink/7833a6b34.jpg',
            'hibbert/f68f3f3c9.gif',
            'sea/0e8a8aa69.gif',
            'stu/a9c5e72a7.png',
            'nick/3b85ac6a0.jpg',
            'duff/e3246663c.jpg',
            'sarc/c61411e1a.png'
        ]
        return 'http://cdn.theatlantic.com/assets/media/img/posts/2014/08/' +
            images[employee.EmployeeID % images.length];
    }

    render() {
        return <div style={{display: 'flex', borderTop: '1px solid black', borderLeft: '1px solid black', marginBottom: '2em', pageBreakInside: 'avoid'}}>
            <div style={{width: '250px', padding: '10px'}}>
                <div style={{fontWeight: 'bold', textAlign: 'center'}}>
                    {this.props.employee.FirstName} {this.props.employee.LastName}
                </div>
                <img style={{width: '200px'}}
                    src={this.getEmployeeImage(this.props.employee)}
                />
            </div>
            <div style={{width: '450px'}}>
                <div style={{display: 'flex', marginBottom: '12pt'}}>
                    <div style={{width: '200px', marginLeft: '50px'}}>
                        {this.props.employee.Address}
                    </div>
                    <div style={{width: '200px'}}>
                        {this.props.employee.HomePhone}
                    </div>
                </div>
                <div style={{display: 'flex', marginBottom: '12pt'}}>
                    <div style={{width: '200px'}}>
                        {this.props.employee.Title}
                    </div>
                    <div style={{width: '150px'}}>
                        {Util.format(this.props.employee.BirthDate, 'd')}
                    </div>
                    <div style={{width: '150px'}}>
                        {Util.format(this.props.employee.HireDate, 'd')}
                    </div>
                </div>
                <div>
                    {this.props.employee.FirstName}\'s Notes:
                </div>
                <div style={{border: '1px solid black', fontStyle: 'italic', fontSize: '90%', padding: '12pt', marginBottom: '12pt' }}>
                    {this.props.employee.Notes}
                </div>
                <div style={{width: '300px', height: '0.5em', borderTop: '.5em solid red'}}>
                    &nbsp;
                </div>
            </div>
        </div>
    }
}