// 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 { Field } from "@coreai-ds/react-components";
import { SearchBox } from "@coreai-ds/react-components";
import { PersonRegular } from "@fluentui/react-icons";
import * as React from 'react';
import type { ButtonProps } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { MicRegular } from "@fluentui/react-icons";
import { Text } from "@coreai-ds/react-components";

const useStyles = makeStyles({
    root: {
        display: 'flex',
        flexDirection: 'column',
    },
    fieldWrapper: {
        padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalMNudge}`,
    },
});

const MicButton: React.FC<ButtonProps> = props => {
    return <Button {...props} appearance="transparent" icon={<MicRegular />} size="small"/>;
};

export const ContentBeforeAfter = (): JSXElement => {
    const styles = useStyles();
    return (<div className={styles.root}>
      <Field className={styles.fieldWrapper} label="Search by name" hint={<>
            A SearchBox with a custom icon in the <code>contentBefore</code> slot.
          </>}>
        <SearchBox contentBefore={<PersonRegular />}/>
      </Field>

      <Field className={styles.fieldWrapper} label="Search by voice" hint={<>
            A SearchBox with a button in the <code>contentAfter</code> slot.
          </>}>
        <SearchBox contentAfter={<MicButton aria-label="Search by voice"/>}/>
      </Field>

      <Field className={styles.fieldWrapper} label="Search with filter" hint={<>
            A SearchBox with a presentational value in the <code>contentBefore</code> slot and another presentational
            value in the <code>contentAfter</code> slot.
          </>}>
        <SearchBox contentBefore={<Text size={400}>Search:</Text>} contentAfter={<Text size={400}>Filter</Text>}/>
      </Field>
    </div>);
};

export default ContentBeforeAfter;