import { useFormerStore } from './Former.store';
import { FormerButtonArea } from './FormerButtonArea';

export const FormerLayoutBottom = () => {
  const { buttonArea, getState, opened, renderBottom ,setState} = useFormerStore((state) => ({
    buttonArea: state.layout?.buttonArea,
    getState: state.getState,
    opened: state.opened,
    renderBottom: state.layout?.renderBottom,
    setState: state.setState,
  }));

  if (renderBottom) {
    return renderBottom(
      <FormerButtonArea />,
      opened ?? false,
      getState('onClose') ?? (() => {setState('opened', false)}),
      getState('onOpen') ?? (() => {setState('opened', true)}),
      getState
    );
  }

  return buttonArea === "bottom" ?  <FormerButtonArea /> : <></>;
};