import { useContext } from '@wordpress/element';

import { OptionPanelProps } from '@components/DesignPanel/types';
import FocalPointControl from '@components/ui/FocalPointControl';

import { useStore } from 'zustand';
import { DesignContext } from '@components/DesignPanel/DesignStore';
import { useActiveOptionValue } from '@components/DesignPanel/hooks/useActiveOptionvalue';

export const ModifierPanel: React.FC<OptionPanelProps> = ({ emitOptions }) => {
  const store = useStore(useContext(DesignContext));

  const { content } = store;

  const activeFocalValue = useActiveOptionValue('mediapos', store);

  return (
    <div key={'FocalPointPicker'}>
      <FocalPointControl
        url={content?.media?.url}
        defaultValue={activeFocalValue}
        onValueChange={(value) => {
          emitOptions([
            {
              id: 'mediapos',
              value: value,
            },
          ]);
        }}
      />
    </div>
  );
};

export default ModifierPanel;