// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { tokens } from "@coreai-ds/react-components";
import * as React from 'react';
import { motionTokens } from "@coreai-ds/react-components";
import { Field } from "@coreai-ds/react-components";
import { Slider } from "@coreai-ds/react-components";
import { Switch } from "@coreai-ds/react-components";
import { Dialog } from "@coreai-ds/react-components";
import { DialogTrigger } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { DialogSurface } from "@coreai-ds/react-components";
import { DialogBody } from "@coreai-ds/react-components";
import { DialogTitle } from "@coreai-ds/react-components";
import { DialogContent } from "@coreai-ds/react-components";
import { DialogActions } from "@coreai-ds/react-components";

const useStyles = makeStyles({
    controls: {
        display: 'flex',
        flexDirection: 'column',
        gap: tokens.spacingVerticalS,
        marginBottom: tokens.spacingVerticalL,
        padding: tokens.spacingVerticalM,
        border: `${tokens.strokeWidthThicker} solid ${tokens.colorNeutralForeground3}`,
        borderRadius: tokens.borderRadiusMedium,
    },
});

export const MotionCustom = (): JSXElement => {
    const classes = useStyles();
    const [duration, setDuration] = React.useState(600);
    const [outScale, setOutScale] = React.useState(0.5);
    const [animateOpacity, setAnimateOpacity] = React.useState(true);
    const [backdropDuration, setBackdropDuration] = React.useState(300);
    const easing = motionTokens.curveDecelerateMid;
    return (<>
      <div className={classes.controls}>
        <Field label={`Surface duration: ${duration}ms`}>
          <Slider min={100} max={2000} step={50} value={duration} onChange={(_, data) => setDuration(data.value)}/>
        </Field>
        <Field label={`Surface outScale: ${outScale.toFixed(2)}`}>
          <Slider min={0} max={1} step={0.05} value={outScale} onChange={(_, data) => setOutScale(data.value)}/>
        </Field>
        <Field label={`Backdrop duration: ${backdropDuration}ms`}>
          <Slider min={0} max={1000} step={50} value={backdropDuration} onChange={(_, data) => setBackdropDuration(data.value)}/>
        </Field>
        <Switch label="Surface animateOpacity" checked={animateOpacity} onChange={(_, data) => setAnimateOpacity(data.checked)}/>
      </div>

      <Dialog surfaceMotion={{ duration, outScale, easing, animateOpacity }}>
        <DialogTrigger disableButtonEnhancement>
          <Button>Open Dialog</Button>
        </DialogTrigger>
        <DialogSurface backdropMotion={{ duration: backdropDuration }}>
          <DialogBody>
            <DialogTitle>Dialog with custom motion params</DialogTitle>
            <DialogContent>
              This dialog's surface animation is driven by direct <code>surfaceMotion</code> params (`duration`,
              `outScale`, `easing`, `animateOpacity`). Its backdrop fade is tuned independently via{' '}
              <code>backdropMotion</code> (`duration`).
            </DialogContent>
            <DialogActions>
              <DialogTrigger disableButtonEnhancement>
                <Button appearance="secondary">Close</Button>
              </DialogTrigger>
            </DialogActions>
          </DialogBody>
        </DialogSurface>
      </Dialog>
    </>);
};

export default MotionCustom;