import { Component } from 'react';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import { StorageManagerContext } from '../../../api/storageManagerContext';
import { notifyError } from '../../../utils/notify';

function formatDate(iso) {
  return new Date(iso).toLocaleString('de-DE');
}

export default class ArticleHistoryTab extends Component {
  static contextType = StorageManagerContext;

  constructor(props) {
    super(props);
    this.state = { history: null };
    this.unwatchHistory = null;
  }

  componentDidMount() {
    this.unwatchHistory = this.context.article.historyWatch(
      this.props.sku,
      (history) => this.setState({ history }),
      notifyError,
    );
  }

  componentWillUnmount() {
    this.unwatchHistory?.();
    this.unwatchHistory = null;
  }

  render() {
    const { history } = this.state;
    if (history == null) return null;
    return (
      <Table
        size="small"
        sx={{
          '& td': { borderBottom: 'none', bgcolor: 'transparent' },
          '& th': { bgcolor: 'transparent' },
        }}
      >
        <TableHead>
          <TableRow>
            <TableCell
              sx={{
                borderBottom: '1px solid rgba(0, 0, 0, 0.35)',
                width: '1%',
                whiteSpace: 'nowrap',
              }}
            >
              Datum
            </TableCell>
            <TableCell
              sx={{ borderBottom: '1px solid rgba(0, 0, 0, 0.35)' }}
            />
          </TableRow>
        </TableHead>
        <TableBody>
          {history.map((entry) => (
            <TableRow key={entry.id}>
              <TableCell
                sx={{ verticalAlign: 'top', whiteSpace: 'nowrap', width: '1%' }}
              >
                {formatDate(entry.date)}
              </TableCell>
              <TableCell sx={{ whiteSpace: 'pre-wrap' }}>{entry.text}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    );
  }
}