import { FocalPointPicker } from '@wordpress/components';
import { useState, useEffect } from '@wordpress/element';

type FocalPointControlProps = {
  defaultValue: string;
  onValueChange: (value: string) => void;
  url?: string;
};

const FocalPointControl: React.FC<FocalPointControlProps> = ({
  defaultValue,
  onValueChange,
  url,
}) => {
  const [focalPoint, setFocalPoint] = useState({
    x: 0.5,
    y: 0.5,
  });

  useEffect(() => {
    onValueChange(
      `[${(focalPoint.x * 100).toFixed(2)}%_${(focalPoint.y * 100).toFixed(2)}%]`
    );
  }, [focalPoint]);

  useEffect(() => {
    // default value is in the format of [x%_y%] parse to get the x and y values
    if (defaultValue.includes('%')) {
      const [x, y] = defaultValue
        .replace('[', '')
        .replace('%]', '')
        .split('_')
        .map((value: string) => parseFloat(value) / 100);

      setFocalPoint({
        x,
        y,
      });
    }
  }, [defaultValue]);

  return (
    <div className="relative flex flex-col">
      <FocalPointPicker
        url={url}
        value={focalPoint}
        onDrag={(value) => setFocalPoint(value)}
        onChange={(value) => setFocalPoint(value)}
      />
    </div>
  );
};

export default FocalPointControl;