import React, { useState, useEffect } from 'react';
import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import CustomIcon from 'components/items/CustomIcon';
import { Form, Field } from 'react-final-form';
import { required } from 'store/utils/validation';
import styleIdentifiers from './manageRoom.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type ManageRoomProps = StateProps & DispatchProps & OwnProps;

const SimpleField = props => {
  const { input, placeholder } = props;
  return <input className={styles('input')} {...input} placeholder={placeholder} />;
};

const AddPeopleForm = props => {
  const { handleSubmit, className } = props;

  return (
    <form onSubmit={handleSubmit} className={styles(className)}>
      <Field
        component={SimpleField}
        placeholder="Enter user ID"
        name="user"
        type="text"
        validate={required}
      />
    </form>
  );
};

const ManageRoom = (props: ManageRoomProps) => {
  const { room, profile, removeMember, addMember } = props;

  console.log(room, profile);

  const [showAddForm, setAddForm] = useState(false);

  function renderRoomName() {
    if (room.getAccounts && profile) {
      const people = room.getAccounts.filter(e => e._id !== profile._id);
      if (people.length !== 0) {
        return (
          <div className={styles('room-item')}>
            {people.map((el, key) => (
              <span key={key}>
                {key !== 0 && ', '}
                {el.userName}
              </span>
            ))}
          </div>
        );
      }
    }
    return <div>Unknow</div>;
  }

  function removePeople(user) {
    removeMember({
      data: {
        roomId: room._id,
        accountIds: [user._id],
      },
    });
  }

  function onSubmit(val) {
    addMember({
      data: {
        roomId: room._id,
        accountIds: [val.user],
      },
    });
  }

  function isMe(item) {
    return item._id === profile._id;
  }

  return (
    <div className={styles('ManageRoom')}>
      <div className={styles('header')}>
        <div className={styles('left')}>
          <div className={styles('name')}>{renderRoomName()}</div>
          <div className={styles('count')}>
            {room.getAccounts && `${room.getAccounts.length} members`}
          </div>
        </div>
      </div>
      <div className={styles('member-container')}>
        <div className={styles('member-title')}>
          <div className={styles('title')}>
            <TextItem path="Members" />
          </div>
          <div className={styles('action-item')} onClick={() => setAddForm(!showAddForm)}>
            <CustomIcon
              icon={showAddForm ? 'undo-alt' : 'user-plus'}
              className={styles('action-icon')}
            />
          </div>
        </div>
        {showAddForm && (
          <Form component={AddPeopleForm} className={styles('add-form')} onSubmit={onSubmit} />
        )}
        <div className={styles('member-list')}>
          {room.getAccounts &&
            room.getAccounts.map((item, key) => (
              <div className={styles('member')} key={key}>
                <div
                  className={styles('icon')}
                  style={{
                    backgroundImage: `url(${item.profilePicture &&
                      (item.profilePicture.small ||
                        item.profilePicture.medium ||
                        item.profilePicture.large)})`,
                  }}
                >
                  {!item.profilePicture && <CustomIcon icon="user" className={styles('circle')} />}
                </div>
                <div className={styles('info')}>
                  <div className={styles('name')}>{item.userName}</div>
                  <div className={styles('email')}>{item.email}</div>
                </div>
                <div className={styles('actions')}>
                  {!isMe(item) && (
                    <div className={styles('action-item')}>
                      <CustomIcon
                        onClick={() => removePeople(item)}
                        className={styles('action-icon')}
                        icon="user-slash"
                      />
                    </div>
                  )}
                </div>
              </div>
            ))}
        </div>
      </div>
    </div>
  );
};

export default ManageRoom;
