import { Component, createRef } from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Chip from '@mui/material/Chip';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
import IconButton from '@mui/material/IconButton';
import ContentPasteIcon from '@mui/icons-material/ContentPaste';
import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
import { article } from '../../api';
import { requireArray, requireObject } from '../../utils/apiShape';
import {
  articleWithPhotoOrder,
  articleWithUploadedPhoto,
  articleWithoutPhoto,
  formatPhotoDimensions,
  formatPhotoSizeKb,
  sortedPhotos,
} from '../../utils/articleDetail';
import { notifyError } from '../../utils/notify';
import { pasteImageOrFallback } from '../../utils/pasteImage';
import { prepareArticlePhoto } from '../../utils/prepareArticlePhoto';
import ArticlePhoto from './ArticlePhoto';

const overlayChipSx = {
  height: 22,
  bgcolor: 'rgba(0, 0, 0, 0.65)',
  color: '#fff',
  '& .MuiChip-label': { px: 0.75, fontSize: 11 },
};

const overlayIconSx = {
  color: '#fff',
  bgcolor: 'rgba(0, 0, 0, 0.55)',
  '&:hover': { bgcolor: 'rgba(0, 0, 0, 0.75)' },
  '&.Mui-disabled': { color: 'rgba(255,255,255,0.35)', bgcolor: 'rgba(0,0,0,0.35)' },
};

class ArticlePhotosDialog extends Component {
  constructor(props) {
    super(props);
    this.fileInputRef = createRef();
    this.state = { busy: false };
    this.handleClose = this.handleClose.bind(this);
    this.handlePasteClick = this.handlePasteClick.bind(this);
    this.handleFileChange = this.handleFileChange.bind(this);
    this.uploadRawImage = this.uploadRawImage.bind(this);
  }

  handleClose() {
    if (this.state.busy) return;
    this.props.onClose();
  }

  async uploadRawImage(rawBlob) {
    const { article: articleData, onArticleUpdated } = this.props;
    this.setState({ busy: true });
    try {
      const file = await prepareArticlePhoto(rawBlob);
      const uploadStarted = performance.now();
      const res = await article.uploadImage(articleData.sku, file);
      console.log('[article-photo] upload', {
        uploadMs: Math.round(performance.now() - uploadStarted),
        bytes: file.size,
        sku: articleData.sku,
      });
      requireObject(res, 'POST /api/article/:sku/image');
      requireObject(res.image, 'image');
      onArticleUpdated?.(articleWithUploadedPhoto(articleData, res.image));
    } catch (err) {
      notifyError(err);
    } finally {
      this.setState({ busy: false });
    }
  }

  handlePasteClick() {
    if (this.state.busy) return;
    void pasteImageOrFallback(() => {
      this.fileInputRef.current?.click();
    }).then((image) => {
      if (image) void this.uploadRawImage(image);
    });
  }

  handleFileChange(event) {
    const file = event.target.files?.[0];
    event.target.value = '';
    if (!file) return;
    void this.uploadRawImage(file);
  }

  async deletePhoto(fullHash) {
    const { article: articleData, onArticleUpdated } = this.props;
    this.setState({ busy: true });
    try {
      await article.deleteImage(articleData.sku, fullHash);
      onArticleUpdated?.(articleWithoutPhoto(articleData, fullHash));
    } catch (err) {
      notifyError(err);
    } finally {
      this.setState({ busy: false });
    }
  }

  async movePhoto(fullHash, delta) {
    const { article: articleData, onArticleUpdated } = this.props;
    const photos = sortedPhotos(articleData);
    const index = photos.findIndex((row) => row.fullHash === fullHash);
    const target = index + delta;
    if (index < 0 || target < 0 || target >= photos.length) return;

    const next = [...photos];
    const [row] = next.splice(index, 1);
    next.splice(target, 0, row);
    const fullHashes = next.map((item) => item.fullHash);

    this.setState({ busy: true });
    try {
      const res = await article.orderImages(articleData.sku, fullHashes);
      requireObject(res, 'PUT /api/article/:sku/images/order');
      requireArray(res.fullHashes, 'fullHashes');
      onArticleUpdated?.(articleWithPhotoOrder(articleData, res.fullHashes));
    } catch (err) {
      notifyError(err);
    } finally {
      this.setState({ busy: false });
    }
  }

  renderPhotoTile(photo, index, total) {
    const { busy } = this.state;
    const hasDimensions = photo.fullW != null && photo.fullH != null;
    const hasSize = photo.fullSize != null;

    return (
      <Box
        key={photo.fullHash}
        sx={{ position: 'relative', width: 200, height: 200, flexShrink: 0 }}
      >
        <ArticlePhoto photo={photo} size={200} sx={{ position: 'absolute', inset: 0 }} />
        <Box
          sx={{
            position: 'absolute',
            inset: 0,
            zIndex: 1,
            pointerEvents: 'none',
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'space-between',
            p: 0.75,
          }}
        >
          <Box
            sx={{
              display: 'flex',
              flexWrap: 'wrap',
              gap: 0.5,
              pointerEvents: 'none',
            }}
          >
            {hasDimensions ? (
              <Chip
                size="small"
                label={formatPhotoDimensions(photo.fullW, photo.fullH)}
                sx={overlayChipSx}
              />
            ) : null}
            {hasSize ? (
              <Chip
                size="small"
                label={formatPhotoSizeKb(photo.fullSize)}
                sx={overlayChipSx}
              />
            ) : null}
          </Box>
          <Box
            sx={{
              display: 'flex',
              justifyContent: 'flex-end',
              gap: 0.25,
              pointerEvents: 'auto',
            }}
          >
            <IconButton
              type="button"
              size="small"
              aria-label="Nach vorne"
              disabled={busy || index === 0}
              onClick={() => void this.movePhoto(photo.fullHash, -1)}
              sx={overlayIconSx}
            >
              <KeyboardArrowUpIcon fontSize="small" />
            </IconButton>
            <IconButton
              type="button"
              size="small"
              aria-label="Nach hinten"
              disabled={busy || index >= total - 1}
              onClick={() => void this.movePhoto(photo.fullHash, 1)}
              sx={overlayIconSx}
            >
              <KeyboardArrowDownIcon fontSize="small" />
            </IconButton>
            <IconButton
              type="button"
              size="small"
              aria-label="Löschen"
              disabled={busy}
              onClick={() => void this.deletePhoto(photo.fullHash)}
              sx={overlayIconSx}
            >
              <DeleteOutlineOutlinedIcon fontSize="small" />
            </IconButton>
          </Box>
        </Box>
      </Box>
    );
  }

  render() {
    const { open, article: articleData } = this.props;
    const { busy } = this.state;
    const photos = sortedPhotos(articleData);

    return (
      <>
        <Dialog open={open} onClose={this.handleClose} maxWidth="md" fullWidth>
          <DialogTitle>Bilder</DialogTitle>
          <DialogContent dividers>
            {photos.length === 0 ? (
              <Box sx={{ color: 'text.secondary', py: 2 }}>Keine Bilder.</Box>
            ) : (
              <Box
                sx={{
                  display: 'flex',
                  flexWrap: 'wrap',
                  gap: 1.5,
                }}
              >
                {photos.map((photo, index) =>
                  this.renderPhotoTile(photo, index, photos.length),
                )}
              </Box>
            )}
          </DialogContent>
          <DialogActions sx={{ px: 3, py: 2, justifyContent: 'space-between' }}>
            <Button
              type="button"
              startIcon={<ContentPasteIcon />}
              onClick={this.handlePasteClick}
              disabled={busy}
            >
              Bild einfügen
            </Button>
            <Button type="button" onClick={this.handleClose} disabled={busy}>
              Schließen
            </Button>
          </DialogActions>
        </Dialog>
        <input
          ref={this.fileInputRef}
          type="file"
          accept="image/*"
          hidden
          onChange={this.handleFileChange}
        />
      </>
    );
  }
}

export default ArticlePhotosDialog;