import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native-web';
import { useRecoilState } from 'recoil';
import { selectedItemsSelector } from '../../recoil/selectors';
import useMove from '../../hooks/useMove';


function resizeItem(item, offset) {
  let { x, y, width, height } = item;
  width += offset.x;
  height += offset.y;

  if (width < 0) {
    width = -width;
    x -= width;
  }

  if (height < 0) {
    height = -height;
    y -= height;
  }

  return {
    ...item,
    x,
    y,
    width,
    height,
  };
}

export default function ResizeHandler() {
  const [selectedItems, setSelectedItems] = useRecoilState(selectedItemsSelector);
  const [selectedItemsSnapshot, setSelectedItemsSnapshot] = useState(null);

  const { onMouseDown } = useMove(({ status, offset }) => {
    if (status === 'start') {
      setSelectedItemsSnapshot(selectedItems)
    }

    if (status === 'moving') {
      setSelectedItems(selectedItemsSnapshot.map(item => resizeItem(item, offset)));
    }
  })

  if (selectedItems.length !== 1 || selectedItems[0].type === 'statistics') {
    return null;
  }

  const { x, y, width, height } = selectedItems[0];

  return (
    <View
      style={[styles.resizeHandler, {
        left: x + width,
        top: y + height,
      }]}
      onMouseDown={onMouseDown}
    >
      <View style={styles.resizeHandlerDot} />
    </View>
  )
}

const styles = StyleSheet.create({
  resizeHandler: {
    width: 24,
    height: 24,
    marginLeft: -13,
    marginTop: -13,
    justifyContent: 'center',
    alignItems: 'center',
    cursor: 'nwse-resize',
  },
  resizeHandlerDot: {
    width: 10,
    height: 10,
    borderRadius: 4,
    backgroundColor: 'white',
    borderWidth: 2,
    borderColor: 'blue',
    position: 'absolute',
  }
})