import React, { FC, useRef, forwardRef, useImperativeHandle } from 'react';
import { CompareImage, Flex, Score } from '@zhst/meta'

interface ComBineImageProps {
    data: {
      imgSummary: string;
      compaterImage: string;
      imageKey: string;
      score: number;
    }
    prevDisable?: boolean;
    nextDisable?: boolean;
    onPre?: () => void;
    onNext?: () => void;
    openRoll?: boolean
}

const ComBineImage: FC<ComBineImageProps> = forwardRef((props, ref) => {
  const {
    data,
    prevDisable,
    nextDisable,
    onNext,
    onPre,
    openRoll
  } = props
  const { imgSummary, compaterImage, score } = data
  const targetImageRef = useRef(null)
  const compareImageRef = useRef(null)

  useImperativeHandle(ref, () => ({
    compareImageRef,
    targetImageRef
  }));

  return (
    <Flex justify='space-evenly' align='center' style={{ padding:'0 32px' }}>
      <CompareImage
        ref={targetImageRef}
        preDisable={prevDisable}
        nextDisable={nextDisable}
        onNext={onNext}
        onPre={onPre}
        showScore={false}
        openRoll={openRoll}
        url={imgSummary}
        label="目标图"
      />
      <Score score={score} />
      <CompareImage
        ref={compareImageRef}
        url={compaterImage}
        openRoll={false}
        score={score}
        label="对比图"
      />
    </Flex>
  )
})

export default ComBineImage