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

import * as React from 'react';
import { Dropdown } from "@coreai-ds/react-components";
import { Option } from "@coreai-ds/react-components";

export const InlineLabel = () => {
    const statusOptions = ['Not started', 'In progress', 'Blocked', 'Completed'];
    const [status, setStatus] = React.useState<string>('');
    const [dynamicStatus, setDynamicStatus] = React.useState<string>('');
    const styles = /* css */ `
      .dropdown-inline-label-example {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        row-gap: var(--spacingVerticalL);
        max-width: 320px;
        padding: var(--spacingVerticalL);
      }

      .dropdown-inline-label-example__field {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        row-gap: var(--spacingVerticalXS);
      }

      .dropdown-inline-label-example__prop-label {
        font-family: var(--fontFamilyMonospace);
        font-size: var(--fontSizeBase200);
        color: var(--colorNeutralForeground3);
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="dropdown-inline-label-example">
          <div className="dropdown-inline-label-example__field">
            <code className="dropdown-inline-label-example__prop-label">label</code>
            <Dropdown label="Status" placeholder="Select a status" value={status} selectedOptions={status ? [status] : []} clearable onOptionSelect={(_event, data) => setStatus(data.optionValue ?? '')}>
              {statusOptions.map((option) => (<Option key={option}>{option}</Option>))}
            </Dropdown>
          </div>

          <div className="dropdown-inline-label-example__field">
            <code className="dropdown-inline-label-example__prop-label">label, dynamicWidth</code>
            <Dropdown label="Status" dynamicWidth value={dynamicStatus} selectedOptions={dynamicStatus ? [dynamicStatus] : []} clearable onOptionSelect={(_event, data) => setDynamicStatus(data.optionValue ?? '')}>
              {statusOptions.map((option) => (<Option key={option}>{option}</Option>))}
            </Dropdown>
          </div>
        </div>
      </>);
};

export default InlineLabel;