import React from 'react';
import styled from 'styled-components';

import { useContentArea } from './hooks';

const Box = styled.div`
  padding: 1em 1em 0 1em;
  position: relative;
  overflow: ${(props) => (props.isHideOverflow ? 'hidden' : 'auto')};
`;

const GrabArea = styled.div`
  position: absolute;
  display: block;
  touch-action: none;
  cursor: se-resize;
  right: 1px;
  bottom: 1px;
  width: 1rem;
  height: 1rem;
  margin: 3px;
  border-right: 3px solid grey;
  border-bottom: 3px solid grey;
`;

interface ContentAreaProps {
  width: number;
  height: number;
  isHideOverflow: boolean;
  onResizeStop({ width, height }: { width: number; height: number }): void;
  disableResize?: boolean;
  children: React.ReactNode;
  // TODO: try this later updating component from parent ops
  setWidth?: () => void;
  setHeight?: () => void;
}

const ContentArea = (props: ContentAreaProps) => {
  const initWidth = props.width;
  const initHeight = props.height;
  const { isHideOverflow, onResizeStop, disableResize = false } = props;
  const [
    { contentAreaRef, width, height },
    { onGrabAreaClick }
  ] = useContentArea(initWidth, initHeight, onResizeStop);

  return (
    <React.Fragment>
      <Box
        ref={contentAreaRef}
        isHideOverflow={isHideOverflow}
        className='content-area-test'
        style={{ width: `${width}px`, height: `${height}px` }}
      >
        {props.children}
      </Box>
      {!disableResize && (
        <>
          <br />
          <GrabArea onMouseDown={onGrabAreaClick} />
        </>
      )}
    </React.Fragment>
  );
};

export default ContentArea;