// View for editing topic (including 'me' topic) parameters.

import React from 'react';
import { FormattedMessage } from 'react-intl';

import Tinode from 'tinode-sdk';

import AvatarCropView from './avatar-crop-view.jsx';

import AvatarUpload from '../widgets/avatar-upload.jsx';
import InPlaceEdit from '../widgets/in-place-edit.jsx';
import TagManager from '../widgets/tag-manager.jsx';

import { AVATAR_SIZE, MAX_AVATAR_BYTES, MAX_EXTERN_ATTACHMENT_SIZE,
  MAX_INBAND_ATTACHMENT_SIZE, MAX_TITLE_LENGTH } from '../config.js';
import { imageScaled, blobToBase64, makeImageUrl } from '../lib/blob-helpers.js';
import { arrayEqual, asEmail, asPhone, theCard } from '../lib/utils.js';

export default class TopicCommonView extends React.Component {
  constructor(props) {
    super(props);

    const topic = this.props.tinode.getTopic(this.props.topic);
    this.state = {
      fullName: topic.public ? topic.public.fn : undefined,
      avatar: makeImageUrl(topic.public ? topic.public.photo : null),
      tags: topic.tags(),
      credentials: topic.getCredentials() || [],
      addCredActive: false,
      addCredInvalid: false,
      newCred: '',
      newAvatar: null,
      newAvatarMime: null,
      previousOnTags: topic.onTagsUpdated
    };

    this.tnNewTags = this.tnNewTags.bind(this);
    this.tnCredsUpdated = this.tnCredsUpdated.bind(this);
    this.handleFullNameUpdate = this.handleFullNameUpdate.bind(this);
    this.handleImageUpdated = this.handleImageUpdated.bind(this);
    this.handleAvatarCropped = this.handleAvatarCropped.bind(this);
    this.uploadAvatar = this.uploadAvatar.bind(this);
    this.handleAvatarCropCancel = this.handleAvatarCropCancel.bind(this);
    this.handleCredChange = this.handleCredChange.bind(this);
    this.handleCredKeyDown = this.handleCredKeyDown.bind(this);
    this.handleCredEntered = this.handleCredEntered.bind(this);
    this.handleTagsUpdated = this.handleTagsUpdated.bind(this);
  }

  componentDidMount() {
    const topic = this.props.tinode.getTopic(this.props.topic);
    topic.onCredsUpdated = this.tnCredsUpdated;
    topic.onTagsUpdated = this.tnNewTags;
  }

  componentWillUnmount() {
    const topic = this.props.tinode.getTopic(this.props.topic);
    topic.onTagsUpdated = this.state.previousOnTags;
    topic.onCredsUpdated = undefined;
  }

  tnNewTags(tags) {
    this.setState({tags: tags});
  }

  tnCredsUpdated(creds) {
    this.setState({credentials: creds || []});
  }

  handleFullNameUpdate(fn) {
    fn = fn.trim().substring(0, MAX_TITLE_LENGTH);
    if (fn) {
      this.setState({fullName: fn});
      this.props.onUpdateAccount(undefined, theCard(fn, null));
    }
  }

  // AvatarUpload widget has changed the avatar: received a new file or deleted the avatar.
  handleImageUpdated(mime, img) {
    // This will show the AvatarCropView is img is not null.
    this.setState({newAvatar: img, newAvatarMime: mime});
    if (!img) {
      // Deleting the avatar.
      this.props.onUpdateAccount(undefined, theCard(null, Tinode.DEL_CHAR));
    }
  }

  // AvatarCropView calls this method when the user has cropped the image.
  handleAvatarCropped(mime, blob, width, height) {
    const url = blob ? URL.createObjectURL(blob) : null;
    this.setState({avatar: url, newAvatar: null, newAvatarMime: null});
    if (blob) {
      this.uploadAvatar(mime, blob, width, height);
    }
  }

  // Utility method for converting cropped avatar blob to bytes for sending inband or
  // for uploading it to the server out of band.
  uploadAvatar(mime, blob, width, height) {
    const readyToUpload = (mime, blob, width, height) => {
      if (blob.size > MAX_AVATAR_BYTES) {
        // Too large to send inband - uploading out of band and sending as a link.
        const uploader = this.props.tinode.getLargeFileHelper();

        this.setState({uploading: true});
        uploader.upload(blob)
          .then((url) => {
            this.props.onUpdateAccount(undefined, theCard(null, url));
          })
          .catch((err) => {
            this.props.onError(err, 'err');
          })
          .finally(() => {
            this.setState({uploading: false});
          });
      } else {
        this.setState({uploading: true});
        // Convert blob to base64-encoded bits.
        blobToBase64(blob, (unused, base64bits) => {
          const du = makeImageUrl({data: base64bits, type: mime});
          this.setState({source: du});
          this.props.onUpdateAccount(undefined, theCard(null, du));
          this.setState({uploading: false});
        });
      }
    };

    if (width > AVATAR_SIZE || height > AVATAR_SIZE || width != height) {
      // Avatar is not square or too large even after cropping. Shrink it and make square.
      imageScaled(blob, AVATAR_SIZE, AVATAR_SIZE, MAX_EXTERN_ATTACHMENT_SIZE, true,
        readyToUpload,
        (err) => {
          this.props.onError(err, 'err');
        });
    } else {
      readyToUpload(mime, blob, width, height);
    }
  }

  handleAvatarCropCancel(img) {
    this.setState({newAvatar: null, newAvatarMime: null});
  }

  handleCredChange(e) {
    this.setState({newCred: e.target.value, addCredInvalid: false});
  }

  handleCredKeyDown(e) {
    if (e.keyCode === 27) {
      // Escape pressed
      this.setState({newCred: '', addCredActive: false});
    } else if (e.keyCode === 13) {
      // Enter pressed
      this.handleCredEntered(e);
    }
  }

  handleCredEntered(e) {
    let value = this.state.newCred.trim();
    if (!value) {
      this.setState({addCredActive: false, addCredInvalid: false});
      return;
    }

    let val = asPhone(value);
    let method;
    if (val) {
      method = 'tel';
    } else {
      val = asEmail(value);
      if (val) {
        method = 'email';
      }
    }
    if (method) {
      this.props.onCredAdd(method, val);
      this.setState({addCredActive: false, newCred: ''});
    } else {
      this.setState({addCredInvalid: true});
    }
  }

  handleTagsUpdated(tags) {
    // Check if tags have actually changed.
    if (arrayEqual(this.state.tags.slice(0), tags.slice(0))) {
      return;
    }
    this.props.onUpdateTags(tags);
  }

  render() {
    if (this.state.newAvatar) {
      return (
        <AvatarCropView
          avatar={this.state.newAvatar}
          mime={this.state.newAvatarMime}
          onSubmit={this.handleAvatarCropped}
          onCancel={this.handleAvatarCropCancel}
          onError={this.props.onError} />
      );
    }

    const credentials = [];
    this.state.credentials.map((cred) => {
      credentials.push(<div key={cred.meth + ":" + cred.val + ":" + cred.done}>{cred.meth}: <tt>{cred.val}</tt>
        <span > {!cred.done ?
          <a href="#" onClick={(e) => {e.preventDefault(); this.props.onCredConfirm(cred.meth, cred.val);}}>
              <FormattedMessage id="validate_credential_action" defaultMessage="confirm"
                description="Validate credentail call to action" />
            </a>
          : null} <a href="#" onClick={(e) => {e.preventDefault(); this.props.onCredDelete(cred.meth, cred.val);}}><i
            className="material-icons gray">delete_outline</i></a></span></div>);
    });

    return (
      <div className="scrollable-panel">
        <div className="panel-form-row">
          <div className="panel-form-column">
            <label className="small"><FormattedMessage id="label_your_name" defaultMessage="Your name"
              description="Label for full name editing" /></label>
            <div><FormattedMessage id="full_name_prompt" defaultMessage="Full name, e.g. John Doe"
              description="Input placeholder for person's full name">{
              (full_name_placeholder) => <InPlaceEdit
                placeholder={full_name_placeholder}
                value={this.state.fullName}
                onFinished={this.handleFullNameUpdate} />
            }</FormattedMessage></div>
          </div>
          <AvatarUpload
            tinode={this.props.tinode}
            avatar={this.state.avatar}
            uid={this.props.myUserId}
            title={this.state.fullName}
            onImageUpdated={this.handleImageUpdated}
            onError={this.props.onError} />
        </div>
        <div className="hr" />
        <FormattedMessage id="title_tag_manager" defaultMessage="Tags (user discovery)"
          description="Section title for TagManager">{
          (title_tag_manager) => <TagManager
            title={title_tag_manager}
            activated={false}
            tags={this.state.tags}
            tinode={this.props.tinode}
            onSubmit={this.handleTagsUpdated} />
        }</FormattedMessage>
        <div className="hr" />
        <div className="panel-form-column">
          <label className="small">
            <FormattedMessage id="label_user_contacts" defaultMessage="Contacts:"
            description="Label for user contacts" />
          </label>
          <div className="quoted">
            {credentials}
            {this.state.addCredActive ?
              <input type="text" value={this.state.value}
                className={this.state.addCredInvalid ? 'invalid' : null}
                placeholder="Phone number or email" required="required" autoFocus
                onChange={this.handleCredChange} onKeyDown={this.handleCredKeyDown} onBlur={this.handleCredEntered} />
              : null}
            <div>
              <a href="#" onClick={(e) => {e.preventDefault(); this.setState({addCredActive: true});}}>
                <i className="material-icons">add</i>
                <FormattedMessage id="button_add_another" defaultMessage="Add another" description="Call to action [+ add another]" />
              </a></div>
          </div>
        </div>
      </div>
    );
  }
};