/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React from 'react';

import { useSelector } from 'react-redux';

import {
  IconButton,
  List,
  ListItem,
  ListItemText,
  Table,
  TableBody,
  TableCell,
  TableRow,
  Tooltip,
} from '@mui/material';

import ClearIcon from '@mui/icons-material/Clear';

import { requestSetPreference } from '../../../senders';

const SectionNeverSaved = () => {
  const passwordsNeverSaveDomains = useSelector(
    (state) => state.preferences.passwordsNeverSaveDomains,
  );

  return (
    <List disablePadding dense>
      {passwordsNeverSaveDomains.length < 1 ? (
        <ListItem disabled>
          <ListItemText primary="Empty." />
        </ListItem>
      ) : (
        <ListItem>
          <Table size="small" aria-label="Never Saved">
            <TableBody>
              {passwordsNeverSaveDomains.map((domain) => (
                <TableRow key={domain}>
                  <TableCell component="th" scope="row">
                    {domain}
                  </TableCell>
                  <TableCell align="right">
                    <Tooltip title="Remove">
                      <IconButton
                        aria-label="Remove"
                        size="small"
                        onClick={() => {
                          requestSetPreference(
                            'passwordsNeverSaveDomains',
                            passwordsNeverSaveDomains.filter(((item) => item !== domain)),
                          );
                        }}
                      >
                        <ClearIcon />
                      </IconButton>
                    </Tooltip>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </ListItem>
      )}
    </List>
  );
};

export default SectionNeverSaved;