import React, { useRef } from 'react';
import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
import { Button } from '@/components/ui';
import { FaSearchMinus, FaSearchPlus } from 'react-icons/fa';
import { IoMdResize } from 'react-icons/io';
import { t } from 'i18next';

const Controls = ({ zoomIn, zoomOut, resetTransform }) => (
  <div className="flex flex-row">
    <Button onClick={() => resetTransform()} variant="plain" shape="circle" size={'sm'} icon={<IoMdResize />} title={t('RESET')} />
    <Button onClick={() => zoomIn()} variant="plain" shape="circle" size={'sm'} icon={<FaSearchPlus />} title={t('ZOOM_IN')}/>
    <Button onClick={() => zoomOut()} variant="plain" shape="circle" size={'sm'} icon={<FaSearchMinus />} title={t('ZOOM_OUT')}/>
  </div>
);

const ImgZoom = ({ children }) => {
  const transformComponentRef = useRef();

  return (
    <TransformWrapper
      defaultScale={1}
      defaultPositionX={0}
      defaultPositionY={0}
      wheel={{ step: 200 }}
      pinch={{ step: 200 }}
      ref={transformComponentRef}
    >
      {(utils) => (
        <React.Fragment>
          <Controls {...utils} />
          <TransformComponent wrapperClass="!w-full !mt-2" contentClass="!w-full">
            {children}
          </TransformComponent>
        </React.Fragment>
      )}
    </TransformWrapper>
  );
};

export default ImgZoom;
