index.tsx

import React, { FC, HTMLAttributes, useState, useCallback } from 'react';
import styled from 'styled-components';
import useDimensions from 'react-use-dimensions';
import { ConvertCard } from './styled/ConvertCard';
import { IconX } from './IconX';
import { IconCopy } from './IconCopy';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { InMenuOptionStuff } from './InMenuOptionStuff';
import { OutMenuOptionStuff } from './OutMenuOptionStuff';
import { IInOption, InOptions, IOutOption, OutOptions } from './types';
import { CaseBar } from './CaseBar';
import { SideBar } from './SideBar';
import { TextAreaContentTop, TextAreaContentBottom } from './TextAreaContent';
import { TextAreaWrapper } from './TextAreaWrapper';
import { Spacer } from './Spacer';
import { OptionsOverlay } from './OptionsOverlay';
import { IconContainer } from './styled/IconContainer';
import { MoreOptionsIconContainer } from './MoreOptionsIconContainer';
import {
  IMaxContentLengthIndicator,
  MaxContentLengthIndicator,
} from './MaxContentLengthIndicator';
import { Textarea } from './styled/Textarea';

export { IInOption, IOutOption, InOptions, OutOptions };

const ConvertCardContent = styled.div`
  width: 100%;
  display: flex;
  position: relative;

  @media (max-width: 720px) {
    flex-direction: column;
  }
`;

const OptionsContainer = styled.div`
  display: flex;

  @media (max-width: 576px) {
    display: none;
  }
`;

const Flex = styled.div`
  display: flex;
`;

const liveMeasure = true;

export interface Props extends HTMLAttributes<HTMLDivElement> {
  inOptions: InOptions;
  inValue: string;
  outValue: string;
  onInInput: (text: string) => void;
  onInOptionsUpdate: (newInOptions: InOptions) => void;
  outOptions: OutOptions;
  onOutOptionsUpdate: (newOutOptions: OutOptions) => void;
  maxContentLength?: number;
  onCopy?: () => void;
  maxContentLengthIndicator?: null | IMaxContentLengthIndicator;
  autoCloseMenuOnOptionSelection?: boolean;
}

export const InOutTextarea: FC<Props> = props => {
  const [menuInOptions, setMenuInOptions] = useState<InOptions>([]);
  const [menuOutOptions, setMenuOutOptions] = useState<OutOptions>([]);
  const [inOptionsMenuRef, inOptionsMenuRefSizes] = useDimensions({
    liveMeasure,
  });
  const [outOptionsMenuRef, outOptionsMenuRefSizes] = useDimensions({
    liveMeasure,
  });
  const [convertCardRef, convertCardSizes] = useDimensions({ liveMeasure });

  const [showAdditionalInOptions, setShowAdditionalInOptions] = useState<
    boolean
  >(false);

  const [showAdditionalOutOptions, setShowAdditionalOutOptions] = useState<
    boolean
  >(false);

  const onInMoreOptionsClick = useCallback(() => {
    setShowAdditionalOutOptions(false);
    setShowAdditionalInOptions(!showAdditionalInOptions);
  }, [showAdditionalInOptions]);

  const onOutMoreOptionsClick = useCallback(() => {
    setShowAdditionalInOptions(false);
    setShowAdditionalOutOptions(!showAdditionalOutOptions);
  }, [showAdditionalOutOptions]);

  const {
    inOptions,
    inValue,
    onInInput,
    onInOptionsUpdate,
    outOptions,
    onOutOptionsUpdate,
    outValue,
    maxContentLength,
    onCopy,
    maxContentLengthIndicator,
    autoCloseMenuOnOptionSelection = true,
  } = props;

  const onInOverlayOptionClick = useCallback(() => {
    if (autoCloseMenuOnOptionSelection) setShowAdditionalInOptions(false);
  }, [autoCloseMenuOnOptionSelection]);

  const onOutOverlayOptionClick = useCallback(() => {
    if (autoCloseMenuOnOptionSelection) setShowAdditionalOutOptions(false);
  }, [autoCloseMenuOnOptionSelection]);

  return (
    <ConvertCard>
      <CaseBar>
        <SideBar>
          <OptionsContainer>
            {inOptions
              .sort(a => {
                if (a.active) return -1;
                return 0;
              })
              .map(option => {
                return (
                  <InMenuOptionStuff
                    key={option.name}
                    inOptionsMenuRefSizes={inOptionsMenuRefSizes}
                    liveMeasure={liveMeasure}
                    menuOptions={menuInOptions}
                    option={option}
                    inOptions={inOptions}
                    onInOptionsUpdate={onInOptionsUpdate}
                    setMenuOptions={setMenuInOptions}
                  />
                );
              })}
          </OptionsContainer>
          <MoreOptionsIconContainer
            ref={inOptionsMenuRef}
            onClick={onInMoreOptionsClick}
            active={showAdditionalInOptions}
          />
        </SideBar>
        <Spacer />
        <SideBar>
          <OptionsContainer>
            {outOptions
              .sort(a => {
                if (a.activeClicked) return -1;
                if (a.active) return -1;
                return 0;
              })
              .map(option => {
                return (
                  <OutMenuOptionStuff
                    key={option.name}
                    outOptionsMenuRefSizes={outOptionsMenuRefSizes}
                    liveMeasure={liveMeasure}
                    menuOptions={menuOutOptions}
                    option={option}
                    outOptions={outOptions}
                    onOutOptionsUpdate={onOutOptionsUpdate}
                    setMenuOptions={setMenuOutOptions}
                  />
                );
              })}
          </OptionsContainer>
          <MoreOptionsIconContainer
            right
            ref={outOptionsMenuRef}
            onClick={onOutMoreOptionsClick}
            active={showAdditionalOutOptions}
          />
        </SideBar>
      </CaseBar>
      <ConvertCardContent ref={convertCardRef}>
        {showAdditionalOutOptions && (
          <OptionsOverlay
            convertCardSizes={convertCardSizes}
            shownMenuOptions={menuOutOptions}
            allMenuOptions={outOptions}
            onAllMenuOptionsUpdate={onOutOptionsUpdate}
            onOptionClick={onOutOverlayOptionClick}
          />
        )}
        {showAdditionalInOptions && (
          <OptionsOverlay
            convertCardSizes={convertCardSizes}
            shownMenuOptions={menuInOptions}
            allMenuOptions={inOptions}
            onAllMenuOptionsUpdate={onInOptionsUpdate}
            onOptionClick={onInOverlayOptionClick}
          />
        )}
        <TextAreaContentTop>
          <Flex>
            <TextAreaWrapper>
              <Textarea
                data-test="from-textarea"
                placeholder="..."
                rows={2}
                smallerFont={false}
                value={inValue}
                maxLength={maxContentLength}
                onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => {
                  if (
                    event.target.value === null ||
                    event.target.value === undefined
                  )
                    return;
                  onInInput(event.target.value);
                }}
              />
            </TextAreaWrapper>
            <IconContainer onClick={() => onInInput('')}>
              <IconX size={32} />
            </IconContainer>
          </Flex>
          {maxContentLengthIndicator &&
            maxContentLengthIndicator.show &&
            maxContentLength && (
              <MaxContentLengthIndicator
                currentLength={inValue ? inValue.length : 0}
                maxContentLength={maxContentLength}
                maxContentLengthIndicator={maxContentLengthIndicator}
              />
            )}
        </TextAreaContentTop>
        <TextAreaContentBottom>
          <TextAreaWrapper>
            <Textarea
              disabled
              smallerFont={false}
              showCopyCursor
              value={outValue}
            />
          </TextAreaWrapper>
          <CopyToClipboard
            text={outValue}
            onCopy={() => {
              if (onCopy) {
                onCopy();
              }
            }}
          >
            <IconContainer>
              <IconCopy size={24} />
            </IconContainer>
          </CopyToClipboard>
        </TextAreaContentBottom>
      </ConvertCardContent>
    </ConvertCard>
  );
};