import React, { useState, useEffect } from 'react';
import {
  Button,
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Form,
  FormGroup,
  Label,
  Input,
  Alert
} from 'reactstrap';
import { SESSION_PRIVACY_MAP } from '../../helpers/globals.js';
import { useTranslation } from 'react-i18next'


const JKSessionSettingsModal = ({ isOpen, toggle, currentSession, onSave, loading }) => {
  const [privacy, setPrivacy] = useState(currentSession ? currentSession.privacy : SESSION_PRIVACY_MAP.private_approve);
  const [description, setDescription] = useState(currentSession ? currentSession.description : '');

  const { t } = useTranslation();

  const handleSubmit = (e) => {
    e.preventDefault();
    onSave({ privacy, description });
  };

  useEffect(() => {
  if (isOpen && currentSession) {
    setPrivacy(currentSession.privacy || SESSION_PRIVACY_MAP.private_approve);
    setDescription(currentSession.description || '');
  }
}, [isOpen, currentSession.privacy, currentSession.description]);

  const handleCancel = () => {
    // Reset to original values
    // if (currentSession) {
    //   setPrivacy(currentSession.privacy || SESSION_PRIVACY_MAP.private_approve);
    //   setDescription(currentSession.description || '');
    // }
    toggle();
  };

  return (
    <Modal isOpen={isOpen} toggle={handleCancel} modalClassName="theme-modal" contentClassName="border">
      <Form onSubmit={handleSubmit}>
        <ModalHeader toggle={handleCancel} className="bg-light d-flex flex-between-center border-bottom-0">
          Session Settings
        </ModalHeader>
        <ModalBody>
          <FormGroup>
            <Label className="fs-0" for="privacySelect">
              Access
            </Label>
            <Input
              type="select"
              aria-label="Session Privacy"
              name="privacy"
              value={privacy}
              onChange={e => setPrivacy(e.target.value)}
              data-testid="session-privacy"
            >
              <option value={SESSION_PRIVACY_MAP['public']}>{t('new.privacy_opt_public', { ns: 'sessions' })}</option>
              <option value={SESSION_PRIVACY_MAP['private_invite']}>
                {t('new.privacy_opt_private_invite', { ns: 'sessions' })}
              </option>
              <option value={SESSION_PRIVACY_MAP['private_approve']}>
                {t('new.privacy_opt_private_approve', { ns: 'sessions' })}
              </option>
            </Input>
          </FormGroup>
          <FormGroup>
            <Label className="fs-0" for="descriptionTextarea">
              Description
            </Label>
            <Input
              type="textarea"
              name="description"
              id="descriptionTextarea"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              rows={4}
              disabled={loading}
            />
          </FormGroup>
        </ModalBody>
        <ModalFooter className="bg-light border-top-0">
          <Button color="secondary" onClick={handleCancel} disabled={loading}>
            Cancel
          </Button>
          <Button color="primary" type="submit" disabled={loading}>
            {loading ? 'Saving...' : 'Save'}
          </Button>
        </ModalFooter>
      </Form>
    </Modal>
  );
};

export default JKSessionSettingsModal;
