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

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

export const Truncate = () => {
    const longOptions = [
        'Awaiting stakeholder review and final sign-off',
        'Blocked by an upstream dependency in another team',
        'In progress — implementation roughly halfway complete',
        'Completed and deployed to the production environment',
    ];
    const [status, setStatus] = React.useState<string>(longOptions[0]);
    const styles = /* css */ `
      .combobox-truncate-example {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        row-gap: var(--spacingVerticalL);
        max-width: 320px;
        padding: var(--spacingVerticalL);
      }

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

      .combobox-truncate-example__prop-label {
        font-family: var(--fontFamilyMonospace);
        font-size: var(--fontSizeBase200);
        color: var(--colorNeutralForeground3);
      }

      .combobox-truncate-example__combobox {
        width: 220px;
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="combobox-truncate-example">
          <div className="combobox-truncate-example__field">
            <code className="combobox-truncate-example__prop-label">
              label, truncateTextOverflow
            </code>
            <Combobox className="combobox-truncate-example__combobox" label="Status" placeholder="Select a status" truncateTextOverflow value={status} selectedOptions={status ? [status] : []} clearable onOptionSelect={(_event, data) => setStatus(data.optionText ?? '')}>
              {longOptions.map((option) => (<Option key={option}>{option}</Option>))}
            </Combobox>
          </div>

          <div className="combobox-truncate-example__field">
            <code className="combobox-truncate-example__prop-label">truncateTextOverflow</code>
            <Combobox className="combobox-truncate-example__combobox" placeholder="Select a status" truncateTextOverflow value={status} selectedOptions={status ? [status] : []} clearable onOptionSelect={(_event, data) => setStatus(data.optionText ?? '')}>
              {longOptions.map((option) => (<Option key={option}>{option}</Option>))}
            </Combobox>
          </div>
        </div>
      </>);
};

export default Truncate;