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

import type { JSXElement } from "@coreai-ds/react-components";
import * as React from 'react';
import type { SearchBoxChangeEvent } from "@coreai-ds/react-components";
import type { InputOnChangeData } from "@coreai-ds/react-components";
import { Field } from "@coreai-ds/react-components";
import { SearchBox } from "@coreai-ds/react-components";

export const Controlled = (): JSXElement => {
    const [value, setValue] = React.useState('initial value');
    const [valid, setValid] = React.useState(true);
    const onChange: (ev: SearchBoxChangeEvent, data: InputOnChangeData) => void = (_, data) => {
        if (data.value.length <= 20) {
            setValue(data.value);
            setValid(true);
        }
        else {
            setValid(false);
        }
    };
    return (<Field label="Controlled SearchBox limiting the value to 20 characters" validationState={valid ? 'none' : 'warning'} validationMessage={valid ? '' : 'Input is limited to 20 characters.'}>
      <SearchBox value={value} onChange={onChange}/>
    </Field>);
};

export default Controlled;