/* eslint-disable react/prop-types */
import React from 'react';
import { useSelector } from 'react-redux';
import { CheckOutlined, ClearOutlined, EditOutlined } from '@mui/icons-material';

import { INTERNAL } from '@/modules/@common/user/constants/rolesType';

import { getUserRoleTypeSelector } from '@/modules/@common/user/redux/selectors';

import { IconButton, MenuItem, Select, Stack, Switch, TableCell, TableRow, TextField } from '@/mui/components';

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

const ACCESS_LEVEL_OPTIONS = [
  { label: 'Hub', value: 0 },
  { label: 'Syndication', value: 1 },
];

const SALES_FORCE_ID_MAX_LENGTH = 15;

function Row(props) {
  const isEditMode = props.editRowData.id && props.editRowData.id === props.row.id;
  const isInternalUser = useSelector(getUserRoleTypeSelector) === INTERNAL;

  const handleOpenEditMode = () => props.onEditRowData(props.row);
  const handleCloseEditMode = () => props.onEditRowData({ id: null });
  const handleUpdateRow = () => props.onUpdateRow();

  return (
    <TableRow key={props.row.id} hover>
      <TableCell>
        <div className={styles.NoWrap}>{props.row.name}</div>
      </TableCell>
      <TableCell>
        <div className={styles.NoWrap}>
          {!isEditMode && props.row.salesforceId}
          {isEditMode && (
            <TextField
              size="xSmall"
              placeholder=""
              value={props.editRowData.salesforceId}
              inputProps={{ maxLength: SALES_FORCE_ID_MAX_LENGTH }}
              onChange={(e) => props.onEditRowData({ salesforceId: e.target.value })}
            />
          )}
        </div>
      </TableCell>
      <TableCell>
        <div className={styles.NoWrap}>
          <Switch
            color="primary"
            size="small"
            checked={isEditMode ? props.editRowData.status : props.row.status}
            disabled={!isEditMode}
            onChange={(e) =>
              props.onEditRowData({
                status: e.target.checked ? 1 : 0,
              })
            }
          />
        </div>
      </TableCell>
      <TableCell>
        <div className={styles.NoWrap}>
          {!isEditMode && <>{`${props.row.isPublic ? 'Syndication' : 'Hub'}`}</>}
          {isEditMode && (
            <Select
              size="xSmall"
              value={props.editRowData.isPublic}
              onChange={(event) => props.onEditRowData({ isPublic: event.target.value })}
            >
              {ACCESS_LEVEL_OPTIONS.map((option) => (
                <MenuItem key={option.value} value={option.value}>
                  {option.label}
                </MenuItem>
              ))}
            </Select>
          )}
        </div>
      </TableCell>
      <TableCell>
        <div className={styles.NoWrap}>
          {!isEditMode && props.row.comments}
          {isEditMode && (
            <TextField
              size="xSmall"
              placeholder=""
              value={props.editRowData.comments}
              onChange={(e) => props.onEditRowData({ comments: e.target.value })}
            />
          )}
        </div>
      </TableCell>
      <TableCell>
        <div className={styles.NoWrap}>
          <Switch
            color="primary"
            size="small"
            checked={isEditMode ? props.editRowData.callToAction : props.row.callToAction}
            disabled={!isEditMode}
            onChange={(e) =>
              props.onEditRowData({
                callToAction: e.target.checked ? 1 : 0,
              })
            }
          />
        </div>
      </TableCell>
      <TableCell>
        {isInternalUser && (
          <div className={styles.NoWrap}>
            {!isEditMode && (
              <IconButton size="small" onClick={handleOpenEditMode}>
                <EditOutlined />
              </IconButton>
            )}

            {isEditMode && (
              <Stack direction="row" gap={3}>
                <IconButton size="small" onClick={handleUpdateRow}>
                  <CheckOutlined />
                </IconButton>
                <IconButton size="small" onClick={handleCloseEditMode}>
                  <ClearOutlined />
                </IconButton>
              </Stack>
            )}
          </div>
        )}
      </TableCell>
    </TableRow>
  );
}

export default Row;
