import type { ButtonProps } from "@phoenix/components";
import {
  Button,
  DialogTrigger,
  Icon,
  Icons,
  Modal,
  ModalOverlay,
} from "@phoenix/components";

import type { RunExperimentCodeDialogProps } from "./RunExperimentCodeDialog";
import { RunExperimentCodeDialogContent } from "./RunExperimentCodeDialog";

export type { RunExperimentCodeDialogProps as ExperimentCodeModalProps };

/**
 * A composable modal component for showing experiment code examples.
 * Use as a child of DialogTrigger alongside your button.
 *
 * @example
 * ```tsx
 * <DialogTrigger>
 *   <Button>Run Experiment</Button>
 *   <ExperimentCodeModal datasetId="123" datasetName="my-dataset" />
 * </DialogTrigger>
 * ```
 */
export function ExperimentCodeModal({
  datasetName,
  datasetId,
  version,
}: RunExperimentCodeDialogProps) {
  return (
    <ModalOverlay isDismissable>
      <Modal variant="slideover" size="L">
        <RunExperimentCodeDialogContent
          datasetName={datasetName}
          datasetId={datasetId}
          version={version}
        />
      </Modal>
    </ModalOverlay>
  );
}

export type RunExperimentButtonProps = RunExperimentCodeDialogProps &
  Pick<ButtonProps, "variant" | "size">;

/**
 * A button that opens a dialog with code examples for running experiments
 * on a dataset via the Python or TypeScript SDK.
 */
export function RunExperimentButton({
  datasetName,
  datasetId,
  version,
  variant = "default",
  size = "S",
}: RunExperimentButtonProps) {
  return (
    <DialogTrigger>
      <Button
        size={size}
        variant={variant}
        leadingVisual={<Icon svg={<Icons.Plus />} />}
      >
        Experiment
      </Button>
      <ExperimentCodeModal
        datasetName={datasetName}
        datasetId={datasetId}
        version={version}
      />
    </DialogTrigger>
  );
}
