/* jshint ignore:start */
import React from 'react';
import * as actions from 'misago/reducers/thread';
import ajax from 'misago/services/ajax';
import snackbar from 'misago/services/snackbar';
import store from 'misago/services/store';

export default function(props) {
  if (!props.user.id) return null;

  return (
    <div className={props.className}>
      <button
        aria-expanded="true"
        aria-haspopup="true"
        className="btn btn-default dropdown-toggle btn-block btn-outline"
        data-toggle="dropdown"
        type="button"
      >
        <span className="material-icon">
          {getIcon(props.thread.subscription)}
        </span>
        {getLabel(props.thread.subscription)}
      </button>
      <Dropdown {...props} />
    </div>
  );
}

export function getIcon(subscription) {
  if (subscription === true) {
    return 'star';
  } else if (subscription === false) {
    return 'star_half';
  } else {
    return 'star_border';
  }
}

export function getLabel(subscription) {
  if (subscription === true) {
    return gettext("E-mail");
  } else if (subscription === false) {
    return gettext("Enabled");
  } else {
    return gettext("Disabled");
  }
}

export function Dropdown(props) {
  return (
    <ul className={props.dropdownClassName || "dropdown-menu stick-to-bottom"}>
      <Disable {...props} />
      <Enable {...props} />
      <Email {...props} />
    </ul>
  );
}

export class Disable extends React.Component {
  onClick = () => {
    if (this.props.thread.subscription === null) {
      return;
    }

    update(this.props.thread, null, 'unsubscribe');
  };

  render() {
    return (
      <li>
        <button className="btn btn-link" onClick={this.onClick}>
          <span className="material-icon">
            star_border
          </span>
          {gettext("Unsubscribe")}
        </button>
      </li>
    )
  }
}

export class Enable extends React.Component {
  onClick = () => {
    if (this.props.thread.subscription === false) {
      return;
    }

    update(this.props.thread, false, 'notify');
  };

  render() {
    return (
      <li>
        <button className="btn btn-link" onClick={this.onClick}>
          <span className="material-icon">
            star_half
          </span>
          {gettext("Subscribe")}
        </button>
      </li>
    )
  }
}

export class Email extends React.Component {
  onClick = () => {
    if (this.props.thread.subscription === true) {
      return;
    }

    update(this.props.thread, true, 'email');
  };

  render() {
    return (
      <li>
        <button className="btn btn-link" onClick={this.onClick}>
          <span className="material-icon">
            star
          </span>
          {gettext("Subscribe with e-mail")}
        </button>
      </li>
    )
  }
}

export function update(thread, newState, value) {
  const oldState = {
    subscription: thread.subscription
  };

  store.dispatch(actions.update({
    subscription: newState
  }));

  ajax.patch(thread.api.index, [
    {op: 'replace', path: 'subscription', value: value}
  ]).then((finalState) => {
    store.dispatch(actions.update(finalState));
  }, (rejection) => {
    if (rejection.status === 400) {
      snackbar.error(rejection.detail[0]);
    } else {
      snackbar.apiError(rejection);
    }

    store.dispatch(actions.update(oldState));
  });
}