// 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 { InlineDrawer } from "@coreai-ds/react-components";
import { DrawerBody } from "@coreai-ds/react-components";
import { DrawerHeader } from "@coreai-ds/react-components";
import { DrawerHeaderTitle } from "@coreai-ds/react-components";
import { DrawerFooter } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import * as React from 'react';

const useStyles = makeStyles({
    root: {
        display: 'flex',
        flexWrap: 'wrap',
        rowGap: tokens.spacingHorizontalXXL,
        columnGap: tokens.spacingHorizontalXXL,
    },
    drawer: {
        height: '400px',
        minWidth: '320px',
    },
});

const Body = () => {
    return (<DrawerBody tabIndex={0} role="group" aria-label="Example scrolling content">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus nam aut amet similique, iure vel voluptates
      cum cumque repellendus perferendis maiores officia unde in? Autem neque sequi maiores eum omnis. Lorem ipsum,
      dolor sit amet consectetur adipisicing elit. Perspiciatis ipsam explicabo tempora ipsum saepe nam. Eum aliquid
      aperiam, laborum labore excepturi nisi odio deserunt facilis error. Mollitia dolor quidem a. Lorem ipsum, dolor
      sit amet consectetur adipisicing elit. Eius soluta ea repellendus voluptatum provident ad aut unde accusantium
      sed. Officia qui praesentium repudiandae maxime molestias, non mollitia animi laboriosam quis. Lorem, ipsum dolor
      sit amet consectetur adipisicing elit. Inventore, architecto eligendi earum dolor voluptas hic minima nihil porro
      odio suscipit quaerat accusantium, aperiam, neque beatae ipsa explicabo consequatur cum quam?
    </DrawerBody>);
};

const Header = () => {
    return (<DrawerHeader>
      <DrawerHeaderTitle>Title goes here</DrawerHeaderTitle>
    </DrawerHeader>);
};

const Footer = () => {
    return (<DrawerFooter>
      <Button appearance="primary">Primary</Button>
      <Button>Secondary</Button>
    </DrawerFooter>);
};

export const WithScroll = (): JSXElement => {
    const styles = useStyles();
    return (<div className={styles.root}>
      <InlineDrawer className={styles.drawer} open>
        <Body />
      </InlineDrawer>

      <InlineDrawer className={styles.drawer} open>
        <Header />
        <Body />
      </InlineDrawer>

      <InlineDrawer className={styles.drawer} open>
        <Body />
        <Footer />
      </InlineDrawer>

      <InlineDrawer className={styles.drawer} open>
        <Header />
        <Body />
        <Footer />
      </InlineDrawer>
    </div>);
};

export default WithScroll;