dashfront/src/components/article/ArticlePhotoTile.jsx

import { PureComponent } from 'react';
import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
import Box from '@mui/material/Box';
import { PanelTile } from 'dashgui/panels';
import { sortedPhotos, primaryPhoto } from '../../utils/articleDetail';
import ArticlePhoto from './ArticlePhoto';
import ArticlePhotosDialog from './ArticlePhotosDialog';

class ArticlePhotoTile extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      editOpen: false,
      selectedHash: null,
    };
    this.handleEditOpen = this.handleEditOpen.bind(this);
    this.handleEditClose = this.handleEditClose.bind(this);
    this.handleSelectPhoto = this.handleSelectPhoto.bind(this);
  }

  componentDidUpdate(prevProps) {
    if (prevProps.article?.sku !== this.props.article?.sku) {
      this.setState({ selectedHash: null });
    }
  }

  handleEditOpen() {
    this.setState({ editOpen: true });
  }

  handleEditClose() {
    this.setState({ editOpen: false });
  }

  handleSelectPhoto(fullHash) {
    this.setState({ selectedHash: fullHash });
  }

  render() {
    const {
      article: articleData,
      onArticleUpdated,
      wide = 1,
      minHeight = 200,
      sx,
      color,
    } = this.props;
    const { editOpen, selectedHash } = this.state;

    const photos = sortedPhotos(articleData);
    const primary = primaryPhoto(articleData);
    const activePhoto =
      (selectedHash && photos.find((p) => p.fullHash === selectedHash)) ||
      primary;
    const otherPhotos = photos.filter((p) => p.fullHash !== activePhoto?.fullHash);

    return (
      <>
        <PanelTile
          wide={wide}
          minHeight={minHeight}
          sx={sx}
          color={color}
          action={{
            label: 'Bilder bearbeiten',
            icon: EditOutlinedIcon,
            onClick: this.handleEditOpen,
            busy: false,
          }}
        >
          {otherPhotos.length === 0 ? (
            <ArticlePhoto photo={activePhoto} />
          ) : (
            <Box
              sx={{
                display: 'flex',
                flexDirection: 'row',
                alignItems: 'flex-start',
                justifyContent: 'flex-start',
                gap: 1.5,
              }}
            >
              <ArticlePhoto photo={activePhoto} />

              {/* Smallthumbs of all other images beside the main image */}
              <Box
                sx={{
                  display: 'flex',
                  flexDirection: 'column',
                  gap: 0.75,
                  maxHeight: 200,
                  overflowY: 'auto',
                  overflowX: 'hidden',
                  mt: '32px',
                  py: 0.25,
                  px: 0.25,
                  flexShrink: 0,
                  scrollbarWidth: 'thin',
                  '&::-webkit-scrollbar': { width: 4 },
                  '&::-webkit-scrollbar-thumb': {
                    bgcolor: 'action.hover',
                    borderRadius: 2,
                  },
                }}
              >
                {otherPhotos.map((p) => (
                  <Box
                    key={p.fullHash}
                    component="button"
                    type="button"
                    onClick={(e) => {
                      e.stopPropagation();
                      this.handleSelectPhoto(p.fullHash);
                    }}
                    sx={{
                      p: 0,
                      m: 0,
                      width: 40,
                      height: 40,
                      flexShrink: 0,
                      cursor: 'pointer',
                      borderRadius: 1,
                      overflow: 'hidden',
                      border: '2px solid transparent',
                      bgcolor: 'transparent',
                      outline: 'none',
                      display: 'block',
                      transition: 'all 0.15s ease',
                      '&:hover': {
                        transform: 'scale(1.08)',
                        borderColor: 'primary.main',
                        boxShadow: 2,
                      },
                      '&:focus-visible': {
                        borderColor: 'primary.main',
                      },
                    }}
                  >
                    <ArticlePhoto
                      photo={p}
                      size={40}
                      useSmallThumb
                      objectFit="cover"
                      sx={{ width: '100%', height: '100%', borderRadius: 1 }}
                    />
                  </Box>
                ))}
              </Box>
            </Box>
          )}
        </PanelTile>
        <ArticlePhotosDialog
          open={editOpen}
          article={articleData}
          onClose={this.handleEditClose}
          onArticleUpdated={onArticleUpdated}
        />
      </>
    );
  }
}

export default ArticlePhotoTile;