import React, { useState, useEffect } from 'react';
import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import CustomIcon from 'components/items/CustomIcon';
import PermissionForm from 'components/forms/PermissionForm';
import { Form } from 'react-final-form';
import _ from 'lodash';
import Switch from 'react-switch';
import styleIdentifiers from './permissions.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type PermissionsProps = StateProps & DispatchProps & OwnProps;

const Permissions = (props: PermissionsProps) => {
  const {
    loadPerm,
    addPerm,
    removePerm,
    detail,
    match: { params },
  } = props;

  const [showForm, setShowForm] = useState(null);

  useEffect(() => {
    loadPerm({ id: params.id });
  }, [params.id]);

  const permissionType = [
    { value: 'admin', label: 'Admin' },
    { value: 'blogAuthor', label: 'Author' },
    { value: 'user', label: 'User' },
    { value: 'public', label: 'Public' },
  ];

  const data = detail && detail.data;

  function handlePermChange(val, perm, type) {
    if (val) {
      addPerm({
        input: { permission: type, permissionType: perm },
        id: params.id,
      });
    } else {
      removePerm({
        input: { permission: type, permissionType: perm },
        id: params.id,
      });
    }
  }

  function renderSwitch(perm, type) {
    if (!data[perm]) return 'Error';

    return (
      <Switch
        onChange={e => handlePermChange(e, perm, type)}
        checked={data[perm].includes(type)}
        checkedIcon={false}
        uncheckedIcon={false}
        handleDiameter={18}
        height={20}
        width={40}
        onColor="#2176ff"
        offColor="#ededed"
        className={styles('switch')}
      />
    );
  }

  function renderRow(type, label, key) {
    return (
      <tr key={key}>
        <th className={styles('space')} />
        <th>{label || type}</th>
        <th>{renderSwitch('r', type)}</th>
        <th>{renderSwitch('w', type)}</th>
        <th>{renderSwitch('d', type)}</th>
      </tr>
    );
  }

  return (
    <div className={styles('Permissions')}>
      <div className={styles('container')}>
        <div className={styles('header')}>
          <div className={styles('title')}>
            <TextItem path="Permissions" />
          </div>
        </div>
        <table>
          <thead>
            <tr>
              <th className={styles('space')} />
              <th>Type</th>
              <th>
                <span>Read</span>
              </th>
              <th>
                <span>Write</span>
              </th>
              <th>
                <span>Delete</span>
              </th>
            </tr>
          </thead>
          <tbody>
            {data && permissionType.map((item, key) => renderRow(item.value, item.label, key))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default Permissions;
