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

import type { DropdownProps } from "@coreai-ds/react-components";
import type { JSXElement } from "@coreai-ds/react-components";
import { useId } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import * as React from 'react';
import { Dropdown } from "@coreai-ds/react-components";
import { Option } from "@coreai-ds/react-components";

const useStyles = makeStyles({
    root: {
        // Stack the label above the field with a gap
        display: 'grid',
        gridTemplateRows: 'repeat(1fr)',
        justifyItems: 'start',
        gap: '2px',
        maxWidth: '200px',
    },
    listbox: {
        maxHeight: '200px',
    },
    // these styles wrap the value text within the dropdown button and cause it to truncate
    truncatedText: {
        overflowX: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
    },
    // these styles allow option text to break and wrap on long words, e.g. emails
    optionText: {
        overflow: 'hidden',
        overflowWrap: 'break-word',
    },
});

export const TruncatedValue = (props: Partial<Omit<DropdownProps, "label" | "dynamicWidth">>): JSXElement => {
    const dropdownId = useId('dropdown');
    const options = [
        'Cat',
        'Caterpillar',
        'Corgi',
        'Chupacabra',
        'Dog',
        'Ferret',
        'Fish',
        'Fox',
        'Hamster',
        'Snake',
        'SuperLongName_123456789_SomeMoreStuffToMakeItLonger@fluentui.dev',
        'Screaming hairy armadillo (Chaetophractus vellerosus)',
    ];
    const styles = useStyles();
    const placeholder = 'Select an animal';
    // show truncated option by default
    const defaultValue = options[11];
    const [value, setValue] = React.useState(defaultValue);
    return (<div className={styles.root}>
      <label htmlFor={dropdownId}>Best pet</label>
      <Dropdown id={dropdownId} listbox={{ className: styles.listbox }} button={<span className={styles.truncatedText}>{value}</span>} onOptionSelect={(e, data) => setValue(data.optionText ?? placeholder)} defaultSelectedOptions={[defaultValue]} defaultValue={defaultValue} {...props}>
        {options.map(option => (<Option key={option} text={option} disabled={option === 'Ferret'}>
            <span className={styles.optionText}>{option}</span>
          </Option>))}
      </Dropdown>
    </div>);
};

export default TruncatedValue;