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

import { ArrowDropDown, ArrowDropUp } from '@mui/icons-material';
import IconButton from '@mui/material/IconButton';

const ButtonContainer = styled.div`
  min-height: 5em;
`;

type ChangeOrderButtonsProps = {
  onClickUp: () => void;
  onClickDown: () => void;
  isHideUpButton: boolean;
  isHideBottomButton: boolean;
};
const ChangeOrderButtons: React.FC<ChangeOrderButtonsProps> = ({
  onClickUp,
  onClickDown,
  isHideUpButton,
  isHideBottomButton,
}) => {
  let upButtonView = <span>&nbsp;</span>;
  if (isHideUpButton === false) {
    upButtonView = (
      <IconButton size='small' onClick={onClickUp}>
        <ArrowDropUp fontSize='large' />
      </IconButton>
    );
  }

  let downButtonView = <span>&nbsp;</span>;
  if (isHideBottomButton === false) {
    downButtonView = (
      <IconButton size='small' onClick={onClickDown}>
        <ArrowDropDown fontSize='large' />
      </IconButton>
    );
  }

  return (
    <ButtonContainer>
      <div>{upButtonView}</div>
      <div>{downButtonView}</div>
    </ButtonContainer>
  );
};

export default ChangeOrderButtons;