anyone-oslo/pages

import React from "react";
import PropTypes from "prop-types";
import DateRangeSelect from "./DateRangeSelect";

export default class PageDates extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      has_dates: props.starts_at ? true : false,
      all_day: !!props.all_day
    };

    this.toggleAllDay = this.toggleAllDay.bind(this);
    this.toggleHasDates = this.toggleHasDates.bind(this);
  }

  toggleHasDates() {
    this.setState({ has_dates: !this.state.has_dates });
  }

  toggleAllDay() {
    this.setState({ all_day: !this.state.all_day });
  }

  timeToString(time) {
    return time.toTimeString().slice(0, 5);
  }

  render() {
    return (
      <div className="page-dates field">
        <input
          type="hidden"
          name="page[all_day]"
          value={this.state.has_dates && this.state.all_day ? "1" : "0"}
        />
        <label>Dates</label>
        <div className="toggles">
          <label className="has-dates-toggle">
            <input
              type="checkbox"
              checked={this.state.has_dates}
              onChange={this.toggleHasDates}
            />
            Enabled
          </label>
          <label className={!this.state.has_dates && "disabled"}>
            <input
              type="checkbox"
              disabled={!this.state.has_dates}
              checked={this.state.all_day}
              onChange={this.toggleAllDay}
            />
            All day event
          </label>
        </div>
        <DateRangeSelect
          objectName="page"
          startsAt={this.props.starts_at}
          endsAt={this.props.ends_at}
          disabled={!this.state.has_dates}
          disableTime={this.state.all_day}
        />
      </div>
    );
  }
}

PageDates.propTypes = {
  starts_at: PropTypes.string,
  ends_at: PropTypes.string,
  all_day: PropTypes.bool
};