import React from 'react';

import Button from '@mui/material/Button';
import { Trans } from '@lingui/macro';
import DashboardIcon from '@mui/icons-material/Dashboard';

import { NewDash, useCreateDash } from './useSaveDialog';
import SettingDialog from './SettingDialog';

declare var kiosk: any;

type TriggerRenderer = (openDialog: () => void) => React.ReactElement | null;

const CreateDialog: React.FC<{
  dashboardId?: string | number;
  renderTrigger?: TriggerRenderer;
}> = ({ dashboardId, renderTrigger }) => {
  const [
    { isOpen, dashboard },
    { openDialog, closeDialog, onChange, create, onChangeDash },
  ] = useCreateDash(dashboardId);

  const kioskHideButton = typeof kiosk !== 'undefined' && kiosk?.removeButton;

  let openDashButtonView: React.ReactElement | null = null;
  if (renderTrigger) {
    openDashButtonView = renderTrigger(openDialog);
  } else if (!kioskHideButton) {
    openDashButtonView = (
      <Button onClick={openDialog} startIcon={<DashboardIcon />}>
        <Trans>Add Dashboard</Trans>
      </Button>
    );
  }

  return (
    <>
      {renderTrigger ? openDashButtonView : null}
      <SettingDialog
        openDialogButton={renderTrigger ? null : openDashButtonView}
        isOpen={isOpen}
        dashboard={dashboard as NewDash}
        closeDialog={closeDialog}
        onChange={onChange}
        onChangeDash={onChangeDash}
        create={create}
      />
    </>
  );
};

export default CreateDialog;