import React, {useState} from 'react';
import {
  errorColor,
  lightErrorColor,
  primary,
  primary15,
  primary3,
  primary45,
} from '../utils/colors';
import {ToolItem} from './ToolItem';
import {FiCopy, FiHardDrive, FiTrash, FiUsers, FiEdit} from 'react-icons/fi';
import {useDispatch} from 'react-redux';
import useHover from '../hooks/useHover';
import {driveName} from '../utils/sailplane-util';
import {MobileActionsDialog} from './MobileActionsDialog';
import {copyToClipboard, hasMouse, notify} from '../utils/Utils';
import {Pill} from './Pill';
import LabelDriveDialog from './LabelDriveDialog';

export const Instance = ({
  data,
  selected,
  onClick,
  onDelete,
  instanceIndex,
  onAccess,
  displayOnly,
}) => {
  const {address, isEncrypted, label} = data;
  const dispatch = useDispatch();
  const [hoverRef, isHovered] = useHover();
  const [mobileActionsVisible, setMobileActionsVisible] = useState(false);
  const [isLabelDialogVisible, setIsLabelDialogVisible] = useState(false);
  const isTouchDevice = !hasMouse;

  let backgroundColor = selected ? primary3 : '#FFF';

  if (isHovered && !selected) {
    backgroundColor = primary15;
  }

  const iconColor = selected ? '#FFF' : primary45;
  const styles = {
    paddingContainer: {
      paddingTop: 3,
      paddingBottom: 3,
    },
    outer: {
      backgroundColor: backgroundColor,
      color: iconColor,
      padding: 6,
      paddingTop: 6,
      fontFamily: 'Open Sans',
      cursor: 'pointer',
      borderRadius: 4,
    },
    container: {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
    },
    address: {
      fontSize: 14,
      overflow: 'hidden',
      width: '40%',
      textOverflow: 'ellipsis',
      whiteSpace: 'nowrap',
    },
    tools: {
      display: displayOnly ? 'none' : 'flex',
      justifyContent: 'flex-end',
    },
    name: {
      fontSize: 16,
      height: 38,
      lineHeight: '19px',
      display: 'flex',
      alignItems: 'center',
    },
    icon: {
      marginRight: 4,
      flexShrink: 0,
    },
    importedTxt: {
      marginLeft: 6,
      fontSize: 13,
    },
    label: {
      fontWeight: 600,
    },
    nameHolder: {
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'flex-start',
      justifyContent: 'center',
      lineHeight: '18px',
      position: 'relative',
      top: label ? -2 : null,
    },
  };

  const handleAddressCopy = async () => {
    await copyToClipboard(address);
    notify('Drive address copied to clipboard', dispatch);
  };

  const mobileActionItems = [
    {
      title: 'Open',
      onClick: () => {
        setMobileActionsVisible(false);
        onClick();
      },
      iconComponent: FiHardDrive,
    },
    {
      title: 'Set nickname',
      onClick: () => {
        setIsLabelDialogVisible(true);
        setMobileActionsVisible(false);
      },
      iconComponent: FiEdit,
    },
    {
      title: 'Manage users',
      onClick: () => {
        onAccess();
        setMobileActionsVisible(false);
      },
      iconComponent: FiUsers,
    },
    {
      title: 'Copy address',
      onClick: () => {
        handleAddressCopy();
        setMobileActionsVisible(false);
      },
      iconComponent: FiCopy,
    },
    {
      title: 'Delete',
      onClick: () => {
        onDelete();
        setMobileActionsVisible(false);
      },
      iconComponent: FiTrash,
      forceColor: lightErrorColor,
    },
  ];

  const thisDriveName = driveName(address);

  return (
    <div style={styles.paddingContainer} ref={hoverRef}>
      <div
        className={'drive'}
        style={styles.outer}
        onClick={(event) => {
          if (mobileActionsVisible) {
            return;
          }

          if (isTouchDevice) {
            setMobileActionsVisible(true);
          } else {
            event.stopPropagation();
            onClick();
          }
        }}>
        <MobileActionsDialog
          isVisible={mobileActionsVisible}
          name={thisDriveName}
          onClose={() => setMobileActionsVisible(false)}
          items={mobileActionItems}
        />
        <div style={styles.container}>
          <div style={styles.name}>
            <FiHardDrive
              className={'shareIcon'}
              color={iconColor}
              size={18}
              style={styles.icon}
            />
            <Pill
              title={isEncrypted ? 'private' : 'public'}
              inverted={selected}
            />
            <div style={styles.nameHolder}>
              {thisDriveName}
              {label ? <div style={styles.label}>[{label}]</div> : null}
            </div>
            {isHovered && !displayOnly && !isTouchDevice ? (
              <ToolItem
                className={'instanceLabel'}
                iconComponent={FiEdit}
                defaultColor={isHovered && selected ? '#FFF' : primary45}
                changeColor={primary}
                tooltip={'Set nickname'}
                onClick={() => setIsLabelDialogVisible(true)}
              />
            ) : null}
          </div>
          {!isTouchDevice ? (
            <div style={styles.tools}>
              <ToolItem
                className={'instanceAccess'}
                defaultColor={iconColor}
                iconComponent={FiUsers}
                size={15}
                changeColor={primary}
                onClick={() => onAccess()}
                tooltip={'Manage users'}
              />
              <ToolItem
                className={'instanceAddressCopy'}
                defaultColor={iconColor}
                iconComponent={FiCopy}
                size={15}
                changeColor={primary}
                tooltip={'Copy'}
                onClick={handleAddressCopy}
              />
              <ToolItem
                className={'instanceDelete'}
                defaultColor={iconColor}
                iconComponent={FiTrash}
                tooltip={'Delete'}
                size={15}
                changeColor={errorColor}
                onClick={() => onDelete()}
              />
            </div>
          ) : null}
        </div>
      </div>
      <LabelDriveDialog
        isVisible={isLabelDialogVisible}
        onClose={() => setIsLabelDialogVisible(false)}
        instance={data}
        instanceIndex={instanceIndex}
      />
    </div>
  );
};