import { Card } from '../card';
import type { CardProps } from '../card';
import type { DropdownMenuItem, DropDownMenuProps } from '../../dropdown-menu';
import { RenderTextGroupCell } from '../card-grid';
import { Select } from '../../@forms/select';
import { Button } from '../../button';
import { MouseEventHandler, useState, useCallback } from 'react';
import makeStyles from '@mui/styles/makeStyles';
import type { Theme } from '../../@styles/theme-provider';

export interface AgentMinVersionProps {
  icon: string;
  title: string;
  subtitle: string;
  valueList: DropdownMenuItem[];
  /**
   * Pass text to mark as read button.
   * @default 'Update'
   */
  btnTxt?: string;
  /**
   * Pass text to mark as read button.
   * @default 'Select Version'
   */
  dropDownPlaceholder?: string;
  btnOnClick?: MouseEventHandler<HTMLButtonElement>;
}

const createClasses = makeStyles<Theme>(() => ({
  labelRoot: {
    width: '200px',
    height: '40px'
  }
}));

export function AgentMinVersion(props: AgentMinVersionProps & CardProps) {
  const {
    icon,
    subtitle,
    title,
    valueList,
    btnTxt = 'Update',
    dropDownPlaceholder = 'Select Version',
    btnOnClick,
    ...rest
  } = props;
  const classes = createClasses();
  const [selectValue, setSelectValue] = useState('');

  const handleSelectChange: NonNullable<DropDownMenuProps['handleClick']> = name => () => {
    const selected = selectValue === name ? '' : name.toString();
    setSelectValue(selected);
  };

  return (
    <Card
      data-testid="AgentMinVersionCard"
      {...rest}
      indicator={false}
      columns={[
        {
          field: 'agentVersion',
          children: (
            <RenderTextGroupCell
              cell={{
                title: title,
                subtitle: subtitle,
                avatarProps: {
                  icon: {
                    src: icon
                  }
                }
              }}
            />
          ),
          flex: 'auto',
          minWidth: 180
        },
        {
          field: 'iconAndSearch',
          children: (
            <Select
              className={classes.labelRoot}
              value={selectValue}
              menuContentProps={{
                handleClick: handleSelectChange,
                listItems: valueList,
                defaultListItems: valueList,
                search: true,
                noOptionsText: 'No Options'
              }}
              placeholder={dropDownPlaceholder}
            />
          ),
          align: 'end',
          hideDivider: true
        },
        {
          field: 'updateButton',
          children: (
            <Button
              color="primary"
              size="medium"
              children={btnTxt}
              autoFocus={false}
              onClick={btnOnClick}
            />
          ),
          align: 'end',
          hideDivider: true,
          width: 81,
          marginLeft: 3,
          flexBasis: 'content'
        }
      ]}
    />
  );
}

export default AgentMinVersion;