import React, { Component, PropTypes } from 'react';
import { List, ListItem, Card, CardHeader, CardText } from 'material-ui';
import Spacing from 'material-ui/styles/spacing';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import UCdefaultTheme from '../../themes/DefaultTheme';
import './Contacts.css';

export default class ContactsPagelet extends Component {
  constructor(props) {
    super(props);

    this.state = {
      expanded: false,
    };
  }

  handleExpandChange = (expanded) => {
    const eventPayload = {
      category: 'NavList Interaction',
      action: `Toggled ${this.props.title}`,
      label: expanded ? 'open' : 'closed',
    };
    this.props.ReactGA.event(eventPayload);
    this.setState({ expanded });
  };
  render() {
    return (
      <div>
        <Card expanded={this.state.expanded} onExpandChange={this.handleExpandChange}>
          <CardHeader
            title={this.props.title}
            actAsExpander
            showExpandableButton
          />
          <CardText expandable >
            <List>
              <ListItem
                primaryText="One Stop-Uptown Campus"
                secondaryText="(513) 556-1000"
                target="_blank"
                rel="noopener noreferrer"
                href="http://onestop.uc.edu"
              />
              <ListItem
                primaryText="One Stop-Blue Ash"
                secondaryText="(513) 745-5740"
                target="_blank"
                rel="noopener noreferrer"
                href="http://www.ucblueash.edu/students/one-stop.html"
              />
              <ListItem
                primaryText="One Stop-Clermont"
                secondaryText="(513) 732-5300"
                target="_blank"
                rel="noopener noreferrer"
                href="http://www.ucclermont.edu/students/onestop.html"
              />
              <ListItem
                primaryText="UC Operator"
                secondaryText="(513) 556-6000"
                target="_blank"
                rel="noopener noreferrer"
                href="http://ucdirectory.uc.edu"
              />
              <ListItem
                primaryText="IT@UC Help Desk"
                secondaryTextLines={2}
                secondaryText={(
                  <div>
                    (513) 556-4357 (HELP) <br />
                    (866) 397-3382 (toll free)
                  </div>
                )}
                target="_blank"
                rel="noopener noreferrer"
                href="http://www.uc.edu/ucit/helpdesk.html"
              />
              <ListItem
                primaryText="Password Self-Service"
                target="_blank"
                rel="noopener noreferrer"
                href="http://www.uc.edu/PSS"
              />
              <ListItem
                primaryText="Parking Services"
                secondaryText="(513) 556-2283"
                target="_blank"
                rel="noopener noreferrer"
                href="http://www.uc.edu/parking.html"
              />
              <ListItem
                primaryText="UC NightRide service"
                target="_blank"
                rel="noopener noreferrer"
                href="https://www.uc.edu/publicsafety/services/night-ride.html"
              />
              <ListItem
                primaryText="Housing and Food Services"
                secondaryText="(513) 556-6461"
                target="_blank"
                rel="noopener noreferrer"
                href="http://www.uc.edu/housing.html"
              />
              <ListItem
                primaryText="UC Public Safety"
                secondaryText="(513) 556-4900"
                target="_blank"
                rel="noopener noreferrer"
                href="http://www.uc.edu/publicsafety/students.html"
              />
            </List>
          </CardText>
        </Card>
      </div>
    );
  }
}

ContactsPagelet.propTypes = {
  title: PropTypes.string,
};

ContactsPagelet.defaultProps = {
  ReactGA: { event: () => {} },
};