import { Component } from "react";
import Layout from '../components/MyLayout.js'
import Link from 'next/link'
import getApplications from "../lib/get-applications";
import Router from 'next/router'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { withAuthSync } from '../utils/auth';
import moment from 'moment/min/moment-with-locales'

import {
    Card, CardBody, CardHeader, Table, Button,
    Form, FormGroup, Label, Input, Row, Col
} from 'reactstrap';

class ApplicationsList extends Component {

    constructor(props) {
        super(props)
        this.state = {
            cos: null,
            filters: {
                participiantName: props.participiantName,
                participiantSurname: props.participiantSurname,
                city: props.city,
                email: props.email,
                phoneNumber: props.phoneNumber,
            }
        };
    }

    static async getInitialProps(context) {

        const participiantName = (context.req && context.req.query.participiantName ? context.req.query.participiantName : '');
        const participiantSurname = (context.req && context.req.query.participiantSurname ? context.req.query.participiantSurname : '');
        const city = (context.req && context.req.query.city ? context.req.query.city : '');
        const email = (context.req && context.req.query.email ? context.req.query.email : '');
        const phoneNumber = (context.req && context.req.query.phoneNumber ? context.req.query.phoneNumber : '');

        const applications = await getApplications({participiantName, participiantSurname, city, email, phoneNumber})
        console.log(`Applications data fetched. Count: ${applications.length}`)

        return {
            applications: applications,
            participiantName: participiantName,
            participiantSurname: participiantSurname,
            city: city,
            email: email,
            phoneNumber: phoneNumber
        }
    }

    handleChange = (event) => {
        const { name, value } = event.target;

        this.setState({
            filters: {
                ...this.state.filters,
                [name]: value
            }
        });
    }


    handleSubmit = (event) => {
        event.preventDefault()
        Router.push({
            pathname: '/applications_list',
            search: "?" + new URLSearchParams({
                participiantName: this.state.filters.participiantName,
                participiantSurname: this.state.filters.participiantSurname,
                city: this.state.filters.city,
                email: this.state.filters.email,
                phoneNumber: this.state.filters.phoneNumber
            }).toString()
        })
    }

    render() {
        return (
            <Layout>
                <h1 className="h3 mb-2 text-gray-800">Zgłoszenia</h1>
                <Card className="shadow mb-4 mt-4">
                    <CardHeader className="py-3">
                        <h6 className="m-0 font-weight-bold text-primary"><FontAwesomeIcon icon="filter" className="icon-default" /> Filtrowanie listy</h6>
                    </CardHeader>
                    <CardBody>
                        <Row>
                            <Col sm="12">
                                <Form inline onSubmit={this.handleSubmit}>
                                    <FormGroup className="ml-0">
                                        <Label for="participiantName" className="mr-sm-2">Imię: </Label>
                                        <Input onChange={this.handleChange} type="text" name="participiantName" id="participiantName" value={this.state.filters.participiantName} />
                                    </FormGroup>
                                    <FormGroup className="ml-2">
                                        <Label for="participiantSurname" className="mr-sm-2">Nazwisko: </Label>
                                        <Input onChange={this.handleChange} type="text" name="participiantSurname" id="participiantSurname" value={this.state.filters.participiantSurname} />
                                    </FormGroup>
                                    <FormGroup className="ml-2">
                                        <Label for="city" className="mr-sm-2">Miasto: </Label>
                                        <Input onChange={this.handleChange} type="text" name="city" id="city" value={this.state.filters.city} />
                                    </FormGroup>

                                    <FormGroup className="ml-2">
                                        <Label for="phoneNumber" className="mr-sm-2">Telefon: </Label>
                                        <Input onChange={this.handleChange} type="text" name="phoneNumber" id="phoneNumber" value={this.state.filters.phoneNumber} />
                                    </FormGroup>
                                    <FormGroup className="ml-2">
                                        <Label for="email" className="mr-sm-2">E-mail: </Label>
                                        <Input onChange={this.handleChange} type="text" name="email" id="email" value={this.state.filters.email} />
                                    </FormGroup>
                                    <Button>Szukaj</Button>
                                </Form>
                            </Col>
                        </Row>
                    </CardBody>
                </Card>
                <Card className="shadow mb-4 mt-4">
                    <CardHeader className="py-3">
                        <h6 className="m-0 font-weight-bold text-primary">Lista zgłoszeń</h6>
                    </CardHeader>
                    <CardBody>

                        <Table hover responsive className="light-blue-table mt-4">
                            <thead>
                                <tr>
                                    <th style={{ width: '60px' }}>Lp.</th>
                                    <th></th>
                                    <th style={{ width: '50px', textAlign: 'center' }}>Wiek</th>
                                    <th style={{ width: '200px', textAlign: 'center' }}>Miasto</th>
                                    <th style={{ width: '230px', textAlign: 'center' }}>Dane kontaktowe</th>
                                    <th style={{ width: '120px', textAlign: 'center' }}>Ilość miejsc</th>
                                    <th style={{ width: '200px', textAlign: 'center' }}>Dowiedział się z</th>
                                    <th style={{ width: '150px', textAlign: 'center' }}>Data zgłoszenia</th>
                                </tr>
                            </thead>
                            <tbody>
                                {this.props.applications.map((application, index) => (
                                    <tr key={application.id}>
                                        <td style={{ textAlign: 'center' }}>{index + 1}.</td>
                                        <td>
                                            <small className="text-muted">Uczestnik:</small> <strong>{application.participant_name} {application.participant_surname}</strong><br></br>
                                            <small className="text-muted">Opiekun:</small> {application.guardian_name} {application.guardian_surname}
                                        </td>
                                        <td style={{ textAlign: 'center' }}>
                                            {application.age}
                                        </td>
                                        <td style={{ textAlign: 'center' }}>
                                            {application.city}
                                        </td>
                                        <td style={{ textAlign: 'center' }}>
                                            <a href={"mailto:" + application.email}>{application.email}</a><br></br>
                                            {application.phone_number}
                                        </td>
                                        <td style={{ textAlign: 'center' }}>
                                            {application.number_of_places}
                                        </td>
                                        <td style={{ textAlign: 'center' }}>
                                            {application._how_did_you_know != null ? (
                                                <span>
                                                    {application._how_did_you_know.name}
                                                </span>
                                            ) : (
                                                    <span>-</span>
                                                )
                                            }
                                        </td>
                                        <td style={{ textAlign: 'center' }}>
                                            {moment(application._application_date).format('DD-MM-YYYY')}
                                        </td>
                                    </tr>

                                ))}
                            </tbody>
                        </Table>
                    </CardBody>
                </Card>
            </Layout>
        )
    }
}


export default withAuthSync(ApplicationsList)