import { FC } from 'react';

import { IconChevronRight, TablerIcon } from '@material-hu/icons/tabler';

import { AvatarProps as HuAvatarProps } from '@material-hu/components/design-system/Avatar/types';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuListItem from '@material-hu/components/design-system/List/components/ListItem';

export type CardModulesProps = {
  title: string;
  description: string;
  Icon: TablerIcon;
  color: HuAvatarProps['color'];
  onClick: (loanType?: string) => void;
  loanNavigate?: string;
  disabled?: boolean;
};

export const RequestCardType: FC<CardModulesProps> = props => {
  const { title, description, Icon, color, onClick, loanNavigate, disabled } =
    props;

  const handleOnClick = () => {
    if (disabled) return;
    if (loanNavigate) {
      onClick(loanNavigate);
    } else {
      onClick();
    }
  };

  return (
    <HuCardContainer
      sx={{
        width: '100%',
        flex: 1,
        '.MuiButtonBase-root': { height: '100%' },
        backgroundColor: theme =>
          disabled ? theme.palette.new.background.elements.grey : undefined,
      }}
      color={disabled ? 'grey' : undefined}
      onClick={handleOnClick}
      hasShadow
    >
      <HuListItem
        avatar={{
          Icon,
          alt: title,
          variant: 'square',
          color: disabled ? undefined : color,
        }}
        text={{ title, description }}
        action={{ Icon: IconChevronRight, onClick: handleOnClick }}
        sx={{
          '.MuiListItem-root': { p: 0 },
          '.MuiAvatar-root': { mr: 0.5 },
        }}
      />
    </HuCardContainer>
  );
};

export default RequestCardType;
