<commit_before>// @flow

import React from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
import { red500, grey50 } from 'material-ui/styles/colors';

import RaisedButton from 'material-ui/RaisedButton';
import DatePicker from 'material-ui/DatePicker';
import Paper from 'material-ui/Paper';
import { List, ListItem } from 'material-ui/List';
import Avatar from 'material-ui/Avatar';
import CircularProgress from 'material-ui/CircularProgress';

import './ShowPicker.css';

class ShowPicker extends React.Component {

    static propTypes = {
        /**
         * Fired when a show has been selected.
         * @signature (show) => void
         */
        onChange: PropTypes.func.isRequired,
    };

    state = {
        open: false,

        availableDates: null,
        minDate: null,
        maxDate: null,

        selectedDate: null,
        showsOnSelectedDate: null,

        selectedShow: null,
    };

    componentDidMount() {
        if (this.state.availableDates) {
            return;
        }

        fetch('/api/shows/dates', {
            accept: 'application/json',
        }).then((response) => {
            return response.json();
        }).then((dates) => {
            const l = dates.length;
            const minDate = (dates && dates[0]) ? moment(dates[0], 'YYYY-MM-DD').toDate() : null;
            const maxDate = (dates && dates[l-1]) ? moment(dates[l-1], 'YYYY-MM-DD').toDate() : null;

            this.setState({
                availableDates: dates,
                minDate: minDate,
                maxDate: maxDate,
            });
        });
    };

    onGetStartedTapped = () => {
        this.setState({ open: true });
    };

    onDateSelected = (_, date) => {
        this.setState({
            selectedDate: date,
            selectedShow: null,
        });

        fetch('/api/shows/' + moment(date).format('YYYY/MM/DD'), {
            accept: 'application/json',
        }).then((response) => {
            return response.json();
        }).then((shows) => {
            this.setState({ showsOnSelectedDate: shows });
            this.onShowSelected(shows[0]);
        });
    };

    shouldDisableDate = (date) => {
        const { availableDates } = this.state;
        if (!availableDates) {
            return false;
        }

        return !availableDates.includes(moment(date).format('YYYY-MM-DD'));
    };

    onShowSelected = (show) => {
        this.setState({ selectedShow: show.id });
        this.props.onChange(show);
    };

    formatDate = (date) => {
        return moment(date).locale('de').format('dddd, DD.MM.YYYY');
    };

    renderItem(show) {
        let formattedTitle = show.type;
        if (show.time) {
            formattedTitle += ', ' + show.time;
        }

        let formattedLocation = show.location;
        if (show.theater) {
            formattedLocation += ', ' + show.theater;
        }

        const avatarLabel = formattedTitle[0].toUpperCase();
        const isSelected = (show.id === this.state.selectedShow);
        const avatar = (
            <Avatar
                color={isSelected ? grey50 : red500}
                backgroundColor={isSelected ? red500 : grey50}
            >
                {avatarLabel}
            </Avatar>
        );

        return (
            <ListItem
                key={show.id}
                primaryText={formattedTitle}
                secondaryText={formattedLocation}
                leftAvatar={avatar}
                onTouchTap={() => this.onShowSelected(show)}
            />
        );
    };

    renderItems() {
        const { showsOnSelectedDate } = this.state;
        if (!showsOnSelectedDate) {
            return (<div />);
        }

        if (showsOnSelectedDate.length === 0) {
            return (
                <p>Für diesen Tag gibt es aktuell leider keine Informationen.</p>
            );
        }

        return showsOnSelectedDate.map((show) => {
            return this.renderItem(show);
        });
    };

    renderList() {
        const { selectedDate, showsOnSelectedDate } = this.state;
        if (!selectedDate) {
            return (<div />);
        }

        if (!showsOnSelectedDate) {
            return (
                <CircularProgress
                    color={red500}
                />
            );
        }

        const styles = {
            showList: {
                textAlign: 'left',
            },
        };

        return (
            <Paper>
            <List style={styles.showList}>
                {this.renderItems()}
            </List>
            </Paper>
        );
    };

    render() {
        const { open, minDate, maxDate } = this.state;

        if (!open) {
            return (
                <RaisedButton
                    label="Suchen"
                    onTouchTap={this.onGetStartedTapped}
                    backgroundColor={red500}
                    labelColor={grey50}
                />
            );
        }

        const styles = {
            root: {
                maxWidth: 400,
                margin: '0 auto',
            },
        };

        return (
            <div id="show-picker-date-picker" style={styles.root}>
                <DatePicker<commit_msg>Hnadle one versus many shows better<commit_after>// @flow

import React from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
import { red500, grey50 } from 'material-ui/styles/colors';

import RaisedButton from 'material-ui/RaisedButton';
import DatePicker from 'material-ui/DatePicker';
import Paper from 'material-ui/Paper';
import { List, ListItem } from 'material-ui/List';
import Avatar from 'material-ui/Avatar';
import CircularProgress from 'material-ui/CircularProgress';

import './ShowPicker.css';

class ShowPicker extends React.Component {

    static propTypes = {
        /**
         * Fired when a show has been selected.
         * @signature (show) => void
         */
        onChange: PropTypes.func.isRequired,
    };

    state = {
        open: false,

        availableDates: null,
        minDate: null,
        maxDate: null,

        selectedDate: null,
        showsOnSelectedDate: null,

        selectedShow: null,
    };

    componentDidMount() {
        if (this.state.availableDates) {
            return;
        }

        fetch('/api/shows/dates', {
            accept: 'application/json',
        }).then((response) => {
            return response.json();
        }).then((dates) => {
            const l = dates.length;
            const minDate = (dates && dates[0]) ? moment(dates[0], 'YYYY-MM-DD').toDate() : null;
            const maxDate = (dates && dates[l-1]) ? moment(dates[l-1], 'YYYY-MM-DD').toDate() : null;

            this.setState({
                availableDates: dates,
                minDate: minDate,
                maxDate: maxDate,
            });
        });
    };

    onGetStartedTapped = () => {
        this.setState({ open: true });
    };

    onDateSelected = (_, date) => {
        this.setState({
            selectedDate: date,
            selectedShow: null,
        });

        fetch('/api/shows/' + moment(date).format('YYYY/MM/DD'), {
            accept: 'application/json',
        }).then((response) => {
            return response.json();
        }).then((shows) => {
            this.setState({ showsOnSelectedDate: shows });
            this.onShowSelected(shows[0]);
        });
    };

    shouldDisableDate = (date) => {
        const { availableDates } = this.state;
        if (!availableDates) {
            return false;
        }

        return !availableDates.includes(moment(date).format('YYYY-MM-DD'));
    };

    onShowSelected = (show) => {
        const { selectedShow } = this.state;
        if (selectedShow === show.id) {
            /* Ignore tapping it multiple times. */
            return;
        }

        this.setState({ selectedShow: show.id });
        this.props.onChange(show);
    };

    formatDate = (date) => {
        return moment(date).locale('de').format('dddd, DD.MM.YYYY');
    };

    renderItem(show) {
        let formattedTitle = show.type;
        if (show.time) {
            formattedTitle += ', ' + show.time;
        }

        let formattedLocation = show.location;
        if (show.theater) {
            formattedLocation += ', ' + show.theater;
        }

        const avatarLabel = formattedTitle[0].toUpperCase();
        const isSelected = (show.id === this.state.selectedShow);
        const avatar = (
            <Avatar
                color={isSelected ? grey50 : red500}
                backgroundColor={isSelected ? red500 : grey50}
            >
                {avatarLabel}
            </Avatar>
        );

        return (
            <ListItem
                key={show.id}
                primaryText={formattedTitle}
                secondaryText={formattedLocation}
                leftAvatar={avatar}
                onTouchTap={() => this.onShowSelected(show)}
                disabled={isSelected}
            />
        );
    };

    renderItems() {
        const { showsOnSelectedDate } = this.state;
        if (!showsOnSelectedDate) {
            return (<div />);
        }

        if (showsOnSelectedDate.length === 0) {
            return (
                <p>Für diesen Tag gibt es aktuell leider keine Informationen.</p>
            );
        }

        return showsOnSelectedDate.map((show) => {
            return this.renderItem(show);
        });
    };

    renderList() {
        const { selectedDate, showsOnSelectedDate } = this.state;
        if (!selectedDate) {
            return (<div />);
        }

        if (!showsOnSelectedDate) {
            return (
                <CircularProgress
                    color={red500}
                />
            );
        }

        const styles = {
            p: {
                paddingTop: 20,
            },
            showList: {
                textAlign: 'left',
            },
        };

        return (
            <Paper>
                { showsOnSelectedDate.length === 1 && (
                    <p style={styles.p}>An diesem Tag fand folgende Vorstellung statt</p>
                ) }
                { showsOnSelectedDate.length > 1 && (
                    <p style={styles.p}>Wähle eine der Vorstellungen an diesem Tag</p>
                ) }
                <List style={styles.showList}>
                    {this.renderItems()}
                </List>
            </Paper>
        );
    };

    render() {
        const { open, minDate, maxDate } = this.state;

        if (!open) {
            return (
                <RaisedButton
                    label="Suchen"
                    onTouchTap={this.onGetStartedTapped}
                    backgroundColor={red500}
                    labelColor={grey50}
                />
            );
        }

        const styles = {
            root: {
                maxWidth: 400,
                margin: '0 auto',
            },
        };

        return (
            <div id="show-picker-date-picker" style={styles.root}>
                <DatePicker
{'fraction_non_alphanumeric': 0.12716348309568648, 'fraction_numerical': 0.00645682001614205, 'mean_word_length': 1.4650751547303271, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 60, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2216925', 'n_tokens_mistral': 3158, 'n_tokens_neox': 2991, 'n_words': 596}