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

import type { JSXElement } from "@coreai-ds/react-components";
import * as React from 'react';
import { Switch } from "@coreai-ds/react-components";

const wrapperStyle: React.CSSProperties = {
    display: 'flex',
    justifyContent: 'space-around',
    width: '100%',
};

export const Label = (): JSXElement => {
    const [checked, setChecked] = React.useState(false);
    const onChange = React.useCallback((ev: React.ChangeEvent<HTMLInputElement>) => {
        setChecked(ev.currentTarget.checked);
    }, [setChecked]);
    const [checked2, setChecked2] = React.useState(false);
    const onChange2 = React.useCallback((ev: React.ChangeEvent<HTMLInputElement>) => {
        setChecked2(ev.currentTarget.checked);
    }, [setChecked2]);
    const [checked3, setChecked3] = React.useState(false);
    const onChange3 = React.useCallback((ev: React.ChangeEvent<HTMLInputElement>) => {
        setChecked3(ev.currentTarget.checked);
    }, [setChecked3]);
    const checkedString = checked ? 'checked' : 'unchecked';
    const checkedString2 = checked2 ? 'checked' : 'unchecked';
    const checkedString3 = checked3 ? 'checked' : 'unchecked';
    return (<div style={wrapperStyle}>
      <Switch checked={checked} label={`With label before and ${checkedString}`} labelPosition="before" onChange={onChange}/>
      <Switch checked={checked2} label={`With label above and ${checkedString2}`} labelPosition="above" onChange={onChange2}/>
      <Switch checked={checked3} label={`With label after and ${checkedString3}`} labelPosition="after" onChange={onChange3}/>
    </div>);
};

export default Label;