notesDialog index

import {
  Box,
  Button,
  ButtonBase,
  Chip,
  Dialog,
  DialogProps,
  Tab,
  Tabs,
  Typography,
} from '@mui/material';
import { ClientFull } from '../../../common/types/client';
import { formatDateTime } from '../../../common/lib/date';
import { tabsStyle } from '../../../ops/opsPage';
import { useMemo, useState } from 'react';
import AddNoteDialog from './addNoteDialog';
import Content from '../../../common/components/context';
import DialogHeader from '../../../ops/components/dialogHeader';
import LeadDialog from '../../../leads/components/leadDialog';
import RichTextEditor from '../../../common/components/richTextEditor';

const noteChipColors = {
  2: '#3A9BB1',
  3: '#003366',
  4: '#16B526',
  5: '#003366',
  6: '#E11B22',
  7: '#3D3D3D',
};
interface NotesDialogProps extends DialogProps {
  client: ClientFull;
}

const noteChipBackground = {
  2: '#F0F9FB',
  3: 'rgba(193, 230, 237, 0.24)',
  4: 'rgba(221, 238, 204, 0.2)',
  5: 'rgba(18, 50, 98, 0.04)',
  6: 'rgba(252, 211, 193, 0.2)',
  7: 'rgba(18, 50, 98, 0.04)',
};

const NotesDialog = ({ client, ...props }: NotesDialogProps) => {
  const [currentTab, setCurrentTab] = useState(0);
  const [showAddDialog, setShowAddDialog] = useState(false);
  const [selectedLeadId, setSelectedLeadId] = useState<number | null>(null);
  const availableNoteTypes = useMemo(
    () => new Set(client.notes.map((note) => note.typeNote)),
    [client.notes],
  );
  const notesToDisplay = useMemo(() => {
    if (currentTab === 0) {
      return client.notes;
    }
    const selectedType = [...availableNoteTypes].at(currentTab - 1);
    return client.notes.filter((note) => note.typeNote === selectedType);
  }, [currentTab, availableNoteTypes, client.notes]);

  return (
    <Dialog fullScreen {...props}>
      <DialogHeader
        onClose={(event) => props.onClose?.(event, 'escapeKeyDown')}
        title={`${client.fullname} - History`}
      />
      <Content sx={{ py: 4 }}>
        <Box display="flex" mb={4} alignItems="center" justifyContent="space-between">
          <Tabs
            sx={tabsStyle}
            variant="scrollable"
            scrollButtons="auto"
            allowScrollButtonsMobile
            value={currentTab}
            onChange={(_, newValue: number) => setCurrentTab(newValue)}
          >
            <Tab label="All" />
            {[...availableNoteTypes].map((noteType) => (
              <Tab key={noteType} label={noteType} />
            ))}
          </Tabs>
          <Button variant="contained" color="primary" onClick={() => setShowAddDialog(true)}>
            Add comment
          </Button>
        </Box>
        {notesToDisplay.map((note) => {
          console.log(note);
          return (
            <Box
              key={note.id}
              sx={{
                mt: 2,
                display: 'flex',
                justifyContent: 'space-between',
                boxShadow: 2,
                p: 3,
                height: 110,
              }}
            >
              <Box display="flex" alignItems="center">
                <Chip
                  variant="outlined"
                  sx={{
                    height: 29,
                    mr: 3,
                    width: 130,
                    border: 'none',
                    fontSize: '10px',
                    color: noteChipColors[note.typeID] || 'default',
                    backgroundColor: noteChipBackground[note.typeID] || 'default',
                  }}
                  label={note.typeNote}
                />
                <Box>
                  <Typography sx={{ mt: 1 }} fontWeight={500} variant="body2">
                    {note.action}
                  </Typography>
                  <Typography color="text.secondary" variant="small">
                    {formatDateTime(note.created)}
                  </Typography>
                  {note.comment && (
                    <Box sx={{ fontSize: 14, color: 'text.secondary', mt: 2 }}>
                      <RichTextEditor value={note.comment} editable={false} />
                    </Box>
                  )}
                </Box>
              </Box>
              {Boolean(note.leadID) && (
                <Box>
                  <ButtonBase onClick={() => note.leadID && setSelectedLeadId(note.leadID)}>
                    <Button variant="outlined" color="primary">
                      View response
                    </Button>
                  </ButtonBase>
                </Box>
              )}
            </Box>
          );
        })}
      </Content>
      <LeadDialog leadId={selectedLeadId} onClose={() => setSelectedLeadId(null)} />
      <AddNoteDialog
        {...props}
        client={client}
        open={showAddDialog}
        onClose={() => setShowAddDialog(false)}
      />
    </Dialog>
  );
};

export default NotesDialog;