import React from 'react';
import Flux from '../lib/flux';
import UserGuildSettingsStore from '../stores/UserGuildSettingsStore';
import Radio from './common/Radio';
import {UserNotificationSettings} from '../Constants';
import i18n from '../i18n';
import NotificationSettingsModalActionCreators from '../actions/NotificationSettingsModalActionCreators';
import ChannelMuteButton from './ChannelMuteButton';
import '../styles/channel_notification_settings.styl';

const ChannelNotificationSettings = React.createClass({
  mixins: [Flux.StoreListenerMixin(UserGuildSettingsStore)],

  getStateFromStores() {
    return {
      messageNotifications: UserGuildSettingsStore.getChannelMessageNotifications(
        this.props.channel.getGuildId(),
        this.props.channel.id
      ),
      muted: UserGuildSettingsStore.isChannelMuted(this.props.channel.getGuildId(), this.props.channel.id),
      guildMessageNotifications: UserGuildSettingsStore.getMessageNotifications(this.props.channel.getGuildId()),
    };
  },

  handleRadioChange(key, e) {
    NotificationSettingsModalActionCreators.updateChannelOverrideSettings(
      this.props.channel.getGuildId(),
      this.props.channel.id,
      {[key]: parseInt(e.currentTarget.value, 10)}
    );
  },

  handleReset() {
    NotificationSettingsModalActionCreators.updateChannelOverrideSettings(
      this.props.channel.getGuildId(),
      this.props.channel.id,
      {
        // eslint-disable-next-line camelcase
        message_notifications: UserNotificationSettings.NULL,
      }
    );
  },

  messageNotificationsRadioOption(value) {
    const {messageNotifications, muted, guildMessageNotifications} = this.state;
    let checked = false;
    let isDefault = false;
    if (messageNotifications === UserNotificationSettings.NULL) {
      isDefault = guildMessageNotifications === value;
    } else {
      checked = messageNotifications === value;
    }
    return (
      <div className="radio-button">
        <Radio
          name={`${this.props.channel.id}:message_notifications`}
          checked={checked}
          default={isDefault}
          value={value}
          disabled={muted || this.props.guildMuted}
          onChange={this.handleRadioChange.bind(this, 'message_notifications')}
        />
      </div>
    );
  },

  render() {
    const {messageNotifications} = this.state;
    const muted = this.state.muted || this.props.guildMuted;
    let reset;
    let options;
    if (!muted) {
      if (messageNotifications !== UserNotificationSettings.NULL) {
        reset = (
          <div className="flex-horizontal reset-container">
            <a onClick={this.handleReset}>{i18n.Messages.RESET}</a>
            <span className="reset-button" onClick={this.handleReset} />
          </div>
        );
      }

      options = (
        <div className="radio-container">
          {this.messageNotificationsRadioOption(UserNotificationSettings.ALL_MESSAGES)}
          {this.messageNotificationsRadioOption(UserNotificationSettings.ONLY_MENTIONS)}
          {this.messageNotificationsRadioOption(UserNotificationSettings.NO_MESSAGES)}
        </div>
      );
    }
    return (
      <div className="channel-notification-settings">
        <div className="flex-horizontal flex-spacer content">
          <div className="flex-horizontal flex-spacer content-inner">
            <div className="flex-horizontal flex-spacer content-inner">
              <label>{this.props.channel.toString()}</label>
              <div>
                <ChannelMuteButton channel={this.props.channel} legacy={true} />
              </div>
            </div>
            {reset}
          </div>
          {options}
        </div>
      </div>
    );
  },
});

export default ChannelNotificationSettings;



// WEBPACK FOOTER //
// ./discord_app/components/ChannelNotificationSettings.js