import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { useDispatch, useSelector } from 'react-redux';

import { hubOptionsSelector } from '../../redux/selectors';
import { getHubsOptionsAction, replaceHubsAction } from '../../redux/slices';

import useGetSelectedVideo from '@/modules/editorial/bulkActions/hooks/useGetSelectedVideo';
import {
  Autocomplete,
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Stack,
  TextField,
  Typography,
} from '@/mui/components';

import styles from './BulkActionReplaceHubs.module.scss';

const CONFIRM_DELETE = 'CONFIRM_DELETE';
const CONFIRM_REPLACE = 'CONFIRM_REPLACE';

function BulkActionReplaceHubs(props) {
  const dispatch = useDispatch();

  const [hubs, setHubs] = useState({ find: null, replace: null });
  const [confirmType, setConfirmType] = useState(null);

  const hubOptions = useSelector(hubOptionsSelector);

  const shouldDisabled = !hubs.find?.length;
  const selectedVideo = useGetSelectedVideo();

  const CONFIRM_CONTENT = {
    [CONFIRM_DELETE]: {
      title: 'Delete Hubs',
      body: `Are you sure you want to delete hubs on ${selectedVideo} selected videos?`,
      action: 'Delete All',
      btnColor: 'error',
    },
    [CONFIRM_REPLACE]: {
      title: 'Replace Confirmation',
      body: `Are you sure you want to replace hubs on ${selectedVideo} videos?`,
      action: 'Replace All',
      btnColor: 'primary',
    },
  };

  const handleShowConfirm = () => {
    const isDeleteMode = !hubs.replace?.length;

    setConfirmType(isDeleteMode ? CONFIRM_DELETE : CONFIRM_REPLACE);
  };

  const handleProcess = () => {
    dispatch(replaceHubsAction(hubs));
    props.onClose();
  };

  return (
    <>
      <Dialog open={props.open} onClose={props.onClose} maxWidth="lg">
        <DialogTitle onClose={props.onClose}>Replace Hubs</DialogTitle>
        <DialogContent>
          <Stack spacing={3}>
            <Stack direction="row" alignItems="center" spacing={3}>
              <Typography variant="body2" color="text.primary" fontWeight={400} className={styles.Label}>
                Find what
              </Typography>
              <Autocomplete
                multiple
                disableCloseOnSelect
                shape="rounded"
                size="small"
                variant="outlined"
                value={hubs.find || []}
                options={hubOptions || []}
                optionLabelKey="label"
                optionValueKey="value"
                filterSelectedOptions
                onChange={(_, hubs$) => {
                  setHubs((hubsObject) => ({ ...hubsObject, find: hubs$ }));
                }}
                onOpen={() => {
                  dispatch(getHubsOptionsAction());
                }}
                renderInput={(params$) => (
                  <TextField {...params$} size="small" variant="outlined" placeholder="Select Hubs" />
                )}
              />
            </Stack>
            <Stack direction="row" alignItems="center" spacing={3}>
              <Typography variant="body2" color="text.primary" fontWeight={400} className={styles.Label}>
                Replace with
              </Typography>
              <Stack fullWidth className={styles.HubsRoot}>
                <Autocomplete
                  multiple
                  disableCloseOnSelect
                  shape="rounded"
                  size="small"
                  variant="outlined"
                  value={hubs.replace || []}
                  options={hubOptions || []}
                  optionLabelKey="label"
                  optionValueKey="value"
                  filterSelectedOptions
                  disabled={shouldDisabled}
                  onChange={(_, hubs$) => {
                    setHubs((hubsObject) => ({ ...hubsObject, replace: hubs$ }));
                  }}
                  onOpen={() => {
                    dispatch(getHubsOptionsAction());
                  }}
                  renderInput={(params$) => (
                    <TextField {...params$} size="small" variant="outlined" placeholder="Select Hubs" />
                  )}
                />
                <Typography variant="caption" color="text.secondary" fontWeight={400} className={styles.Hint}>
                  Leave empty to stop sharing with the selected hubs
                </Typography>
              </Stack>
            </Stack>
          </Stack>
        </DialogContent>
        <DialogActions>
          <Button variant="text" color="primary" onClick={props.onClose}>
            Cancel
          </Button>
          <Button variant="contained" color="primary" onClick={handleShowConfirm} disabled={shouldDisabled}>
            Replace All
          </Button>
        </DialogActions>
      </Dialog>
      {confirmType && (
        <Dialog open={confirmType} onClose={() => setConfirmType(null)} maxWidth="md">
          <DialogTitle onClose={() => setConfirmType(null)}>{CONFIRM_CONTENT[confirmType].title}</DialogTitle>
          <DialogContent>{CONFIRM_CONTENT[confirmType].body}</DialogContent>
          <DialogActions>
            <Button variant="outlined" color="primary" onClick={() => setConfirmType(null)}>
              Cancel
            </Button>
            <Button variant="contained" color={CONFIRM_CONTENT[confirmType].btnColor} onClick={handleProcess}>
              {CONFIRM_CONTENT[confirmType].action}
            </Button>
          </DialogActions>
        </Dialog>
      )}
    </>
  );
}

BulkActionReplaceHubs.propTypes = {
  open: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired,
};

export default BulkActionReplaceHubs;
