interface FlyoutButtonProps {
  title: string;
  mainSize?: 's' | 'm' | 'l' | 'fill';
  flyoutType: 'overlay' | 'push';
  ownFocus?: boolean;
}

const ManagedFlyoutButton: React.FC<FlyoutButtonProps> = (props) => {
  const { title, mainSize, flyoutType, ownFocus = false } = props;
  const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);

  const handleOpenMainFlyout = () => {
    setIsFlyoutVisible(true);
  };

  const mainFlyoutOnClose = () => {
    setIsFlyoutVisible(false);
  };

  return (
    <>
      <EuiText>
        <EuiButton disabled={isFlyoutVisible} onClick={handleOpenMainFlyout}>
          Open managed flyout
        </EuiButton>
      </EuiText>
      {isFlyoutVisible && (
        <EuiFlyout id={`mainFlyout-${title}`} session="start" flyoutMenuProps={{ title }} size={mainSize} type={flyoutType} ownFocus={ownFocus} onClose={mainFlyoutOnClose} >
          <EuiFlyoutBody>
            <EuiText>
              <p>
                <strong>{title} content.</strong>
              </p>
            </EuiText>
          </EuiFlyoutBody>
        </EuiFlyout>
      )}
    </>
  ); // prettier-ignore
};

const NonManagedFlyoutButton: React.FC<FlyoutButtonProps> = (props) => {
  const { title, mainSize: size, flyoutType } = props;
  const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);

  const handleOpenFlyout = () => {
    setIsFlyoutVisible(true);
  };

  const flyoutOnClose = () => {
    setIsFlyoutVisible(false);
  };

  return (
    <>
      <EuiText>
        <EuiButton disabled={isFlyoutVisible} onClick={handleOpenFlyout}>
          Open non-session flyout
        </EuiButton>
      </EuiText>
      {isFlyoutVisible && (
        <EuiFlyout size={size} type={flyoutType} ownFocus={true} onClose={flyoutOnClose} session="never" >
          <EuiFlyoutBody>
            <EuiText>
              <p>
                <strong>{title} content.</strong>
              </p>
            </EuiText>
          </EuiFlyoutBody>
        </EuiFlyout>
      )}
    </>
  ); // prettier-ignore
};

const Demo: React.FC = () => {
  return (
    <>
      <ManagedFlyoutButton title="Managed Flyout" flyoutType="push" mainSize="s" />
      <EuiSpacer size="s" />
      <NonManagedFlyoutButton title="Non-Managed Flyout" flyoutType="overlay" mainSize="m" />
    </>
  ); // prettier-ignore
};