import Inventory2OutlinedIcon from '@mui/icons-material/Inventory2Outlined';
import Box from '@mui/material/Box';
import ButtonBase from '@mui/material/ButtonBase';
import Typography from '@mui/material/Typography';
import { Tile, tileBaseSx } from './Tile';
import { formatPrice } from '../../utils/price';
import { articleSku } from '../../pages/artikel/articleRoute';
import ArticlePhoto from '../article/ArticlePhoto';

export class ArticleTile extends Tile {
  hasPhoto() {
    const { article } = this.props;
    return article?.thumbHash != null || article?.fullHash != null;
  }

  renderIcon() {
    return <Inventory2OutlinedIcon color="action" sx={{ fontSize: 36 }} />;
  }

  renderSecondary() {
    const { article } = this.props;
    if (!article) return null;
    const sku = articleSku(article);
    return (
      <>
        {sku ? (
          <Typography variant="caption" color="text.secondary" noWrap sx={{ maxWidth: '100%' }}>
            {sku}
          </Typography>
        ) : null}
        {article.net != null && (
          <Typography variant="caption" fontWeight={600}>
            {formatPrice(article.net)}
          </Typography>
        )}
      </>
    );
  }

  render() {
    if (!this.hasPhoto()) {
      return super.render();
    }

    const { article, label, sx, disabled } = this.props;
    const sku = articleSku(article);

    return (
      <ButtonBase
        component="button"
        type="button"
        disabled={disabled}
        onClick={this.handleClick}
        sx={{
          ...tileBaseSx,
          p: 0,
          gap: 0,
          position: 'relative',
          ...(disabled ? { opacity: 0.5, pointerEvents: 'none' } : {}),
          ...sx,
        }}
      >
        <Box sx={{ position: 'absolute', inset: 0 }}>
          <ArticlePhoto
            fill
            photo={{
              fullHash: article.fullHash,
              thumbW: article.thumbW,
              thumbH: article.thumbH,
              thumbHash: article.thumbHash,
            }}
          />
        </Box>
        <Box
          sx={{
            position: 'absolute',
            left: 0,
            right: 0,
            bottom: 0,
            px: 1,
            py: 0.75,
            background: 'linear-gradient(transparent, rgba(0,0,0,0.65))',
            textAlign: 'left',
          }}
        >
          {label ? (
            <Typography
              variant="body2"
              fontWeight={600}
              noWrap
              sx={{ color: '#fff', lineHeight: 1.2 }}
            >
              {label}
            </Typography>
          ) : null}
          {sku ? (
            <Typography variant="caption" noWrap sx={{ color: 'rgba(255,255,255,0.85)' }}>
              {sku}
            </Typography>
          ) : null}
        </Box>
      </ButtonBase>
    );
  }
}