import React, { useRef, useState, useEffect } from 'react';
import {useHistory} from 'react-router-dom';
import { Form, FormGroup, Input, Label, Card, CardBody, Button, Row, Col } from 'reactstrap';
import FalconCardHeader from '../common/FalconCardHeader';
import JKTooltip from '../common/JKTooltip';
import { useTranslation } from 'react-i18next';
import { useAuth } from '../../context/UserAuth';
import JKFriendsAutoComplete from '../people/JKFriendsAutoComplete';
import JKSessionInviteesChips from '../people/JKSessionInviteesChips';
import { getFriends } from '../../helpers/rest';
import jkCustomUrlScheme from '../../helpers/jkCustomUrlScheme';

const privacyMap = {
  "public": 1,
  "private_invite": 2,
  "private_approve": 3
}

const JKNewMusicSession = () => {
  const { currentUser } = useAuth();
  const { t } = useTranslation();
  const [friends, setFriends] = useState([]);
  const [isFriendsFetched, setIsFriendsFetched] = useState(false)
  const [description, setDescription] = useState("")
  const [invitees, setInvitees] = useState([]);
  const [privacy, setPrivacy] = useState("1");
  const [submitted, setSubmitted] = useState(false);
  const history = useHistory();
  const formRef = useRef()

  useEffect(() => {
    fetchFriends();
  }, []);

  useEffect(() => {
    if(isFriendsFetched){
      populateFormDataFromLocalStorage()
    }
  }, [isFriendsFetched])

  const fetchFriends = () => {
    getFriends(currentUser.id)
    .then(resp => {
      if (resp.ok) {
        return resp.json();
      }
    })
    .then(data => {
      console.log('friends = ', data)
      setFriends(data);
      setIsFriendsFetched(true);
    });
  }

  const populateFormDataFromLocalStorage = () => {
    try {
      const formData = localStorage.getItem('formData');
      if(formData){
        const formDataItems = JSON.parse(formData);
        setDescription(formDataItems['description']);
        setPrivacy(formDataItems['privacy']);
        const inviteeIds = formDataItems['inviteeIds'];
        const invitees = friends.filter(f => inviteeIds.includes(f.id));
        updateSessionInvitations(invitees);
      }
    } catch (error) {
      console.error('localStorage is not available', error)
    }
  }

  const handleSubmit = event => {
    event.preventDefault();
    setSubmitted(true);
    const formData = new FormData(event.target);
    const payload = {
      privacy: formData.get('privacy'),
      description: formData.get('description'),
      inviteeIds: invitees.map(i => i.id).join()
    };
    console.log(payload);
    //window.open jamkazam app url using custom URL scheme
    //an example URL would be: jamkazam://url=https://www.jamkazam.com/client#/createSession/privacy~2|description~hello|inviteeIds~1,2,3,4 
    const q = `privacy~${payload.privacy}|description~${payload.description}|inviteeIds~${payload.inviteeIds}`
    //const url = encodeURI(`${process.env.REACT_APP_CLIENT_BASE_URL}/client#/createSession/${q}`)
    //const urlScheme = `jamkazam://url=${url}`
    const urlScheme = jkCustomUrlScheme('createSession', q)
    window.open(urlScheme)
    try {
      //store this payload in localstorage.
      localStorage.setItem('formData', JSON.stringify(payload))  
    } catch (error) {
      console.error("localStorage is not available", error);
    }
    //history.push('/sessions');
    return false;
  };

  const handleOnSelect = submittedItems => {
    updateSessionInvitations(submittedItems)
  };

  const updateSessionInvitations = (submittedInvitees) => {
    const updatedInvitees = Array.from(new Set([...invitees, ...submittedInvitees]));
    setInvitees(updatedInvitees);

    const friendIds = submittedInvitees.map(si => si.id)
    const updatedFriends = friends.filter(f => !friendIds.includes(f.id));
    setFriends(updatedFriends);
  }

  const removeInvitee = invitee => {
    const updatedInvitees = invitees.filter(i => i.id !== invitee.id);
    setInvitees(updatedInvitees);
    const updatedFriends = [...friends, invitee];
    setFriends(updatedFriends);
  };

  return (
    <div>
      <Card>
        <FalconCardHeader title={t('new.page_title', { ns: 'sessions' })} titleClass="font-weight-bold" />
        <CardBody className="pt-0">
          <Row>
            <Col>
              <Form onSubmit={handleSubmit} ref={formRef}>
                <FormGroup className="mb-3">
                  <Label>
                    {t('new.privacy', { ns: 'sessions' })}{' '}
                    <JKTooltip title={t('new.privacy_help', { ns: 'sessions' })} />
                  </Label>
                  <Input type="select" aria-label="Session Privacy" name="privacy" value={privacy} onChange={(e) => setPrivacy(e.target.value)} data-testid="session-privacy">
                    <option value={privacyMap["public"]}>{t('new.privacy_opt_public', { ns: 'sessions' })}</option>
                    <option value={privacyMap["private_invite"]}>{t('new.privacy_opt_private_invite', { ns: 'sessions' })}</option>
                    <option value={privacyMap["private_approve"]}>{t('new.privacy_opt_private_approve', { ns: 'sessions' })}</option>
                  </Input>
                </FormGroup>

                <FormGroup className="mb-3">
                  <Label>
                    {t('new.invitations', { ns: 'sessions' })}{' '}
                    <JKTooltip title={t('new.invitations_help', { ns: 'sessions' })} />
                  </Label>
                  <JKFriendsAutoComplete friends={friends} onSelect={handleOnSelect} />
                  { invitees.length > 0 && 
                    <JKSessionInviteesChips invitees={invitees} removeInvitee={removeInvitee} />
                  }
                </FormGroup>
                <FormGroup className="mb-3">
                  <Label>
                    {t('new.description', { ns: 'sessions' })}{' '}
                    <JKTooltip title={t('new.description_help', { ns: 'sessions' })} />
                  </Label>
                  <Input
                    value={description}
                    onChange={(e) => setDescription(e.target.value)}
                    name="description"
                    type="textarea"
                    data-testid="session-description"
                    placeholder={t('new.description_placeholder', { ns: 'sessions' })}
                  />
                </FormGroup>

                <FormGroup className="mb-3">
                  <Button color="primary" data-testid="btn-create-session" disabled={submitted}>{t('new.create_session', { ns: 'sessions' })}</Button >
                </FormGroup>
              </Form>
            </Col>
            <Col />
          </Row>
        </CardBody>
      </Card>
    </div>
  );
};

export default JKNewMusicSession;
