import React, { ChangeEvent, useContext, useEffect, MouseEvent, useState } from 'react';
import Modal from '@material-ui/core/Modal';
import Fade from '@material-ui/core/Fade';
import { makeStyles } from '@material-ui/core/styles';
import styled from 'styled-components';
import { FormControl, MenuItem, Select, useControlled, useEventCallback } from '@material-ui/core';
import { axiosInstance } from '../utils/axiosInstance';
import { Group } from '../types';
import { coursesContext } from '../contexts/CoursesProvider';
import { Dropdown } from './Dropdown';
import { DropdownModal } from './DropdownModal';
import { dayMapping } from '../constants';
import TransferIcon from '../assets/switch.svg';
import DeleteIcon from '@material-ui/icons/Delete';
import InformationIcon from '../assets/information.svg';

interface TransferProps {
  handleClose: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
  isTransferOpen: boolean;
}

const useStyles = makeStyles({
  wrapper: {
    display: 'flex',
    justifyContent: 'center',
    textAlign: 'center',
    alignItems: 'center',
  },
});

const TransferStyled = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  outline: none;
  min-width: 35%;
  height: 70%;
  background: white;
  margin: 0 auto;
  border-radius: 5px;
  letter-spacing: 0.1ch;
`;

const BinIcon = styled(DeleteIcon)`
  max-width: 30px;
  min-width: 30px;
  cursor: pointer;
  &:hover {
    fill: white;
  }
`;

const InputWrapper = styled.div`
  display: flex;
  flex-direction: row;
  flex: 1;
  margin-top:40px;
`;

const TransferGiveStyled = styled.div`
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-transform: uppercase;
`;

const TransferReceiveStyled = styled.div`
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-transform: uppercase;
`;

const TransferTextStyled = styled.div`
  font-size: 30px;
  margin-bottom: 10px;
`;

const TransferInputStyled = styled.div`
  width: 250px;
  height: 25px;
  padding: 10px;
  font-size: 24px;
  transition-duration: 0.3s;
  input::placeholder {
    color: black;
    font-weight: bold;
    text-align: center;
  }
  text-transform: none;
`;

const SaveWrapper = styled.div`
  margin-top: 40px;
`;

const SaveButton = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  background-color: #43a047;
  border-radius: 10px;
  cursor: pointer;
  height: 40px;
  width: 150px;
  font-size: 12px;
  letter-spacing: 0.1ch;
  line-height: normal;
  &:hover {
    color: #ffffff;
  }

  &:active {
    background-color: #54c457;
  }

  text-transform: uppercase;
  box-shadow: 3px 3px 5px 0px rgba(189,189,189,1);
`;

const ExchangesWrapper = styled.div`
  flex: 4;
  overflow-y: scroll;
  width: 100%;
  ::-webkit-scrollbar-track {
    border-radius: 10px;
  }
  ::-webkit-scrollbar {
    width: 5px;
    border-style: none;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #4b4b4b;
  }
  border-top: 1px solid #b8b8b8;
`;

const ExchangesRow = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
`;

const Icon = styled.img`
  width: 20px;
`;

const Information = styled.img`
  width: 35px;
`;

const Exchange = styled.div`
  display: flex;
  flex-direction: column;
  background-color: #b5d2e0;
  border-radius: 2px;
  width: 280px;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  line-height: 0;
`;

const ExchangeTitle = styled.p`
  font-size: 16px;
  font-weight: bold;
`;

const ExchangeParagraph = styled.p`
  font-size: 13px;
  color: #1a1a1a;
`;

export const Transfer = ({ handleClose, isTransferOpen }: TransferProps) => {
  const { basket, selectBasketCourses } = useContext(coursesContext)!;
  // const basketCourseGroups = useMemo(() => selectBasketCourseGroups(course.name), []);
  const basketCourses = selectBasketCourses();

  const classes = useStyles();
  // const groups = selectGroups();
  const [input, setInput] = useState('');
  const [open, setOpen] = useState(false);

  const [assignmentsClasses, setAssignmentsClasses] = useState<Array<any>>([]);
  const [selectedAssignmentsClasses, setSelectedAssignmentsClasses] = useState<any>('');
  const [selectedGroup, setSelectedGroup] = useState<any>('');
  const [groups, setGroups] = useState<any>([]);
  const [exchanges, setExchanges] = useState<any>(null);
  const [save, setSave] = useState(false);
  const [tour, setTour] = useState<any>(null);
  // const allGroups
  const handleSelectedAssignmentsGroupChange = (event: React.ChangeEvent<{ value: unknown }>) => {
    setSelectedAssignmentsClasses(event.target.value as any);
  };

  const handleGroupsChange = (event: React.ChangeEvent<{ value: unknown }>) => {
    setSelectedGroup(event.target.value as any);
  };

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => setInput(event.target.value);
  const handleShowDropdown = () => setOpen(true);

  const handleCloseDropdown = () => setOpen(false);

  useEffect(() => {
    if (selectedAssignmentsClasses) {
      const allGroups = basketCourses.filter((el) => el.name === selectedAssignmentsClasses.name);
      const allClasses = allGroups[0]?.classes;
      if (allClasses) {
        const filteredClasses = allClasses.filter((el: any) => {
          return el.time !== selectedAssignmentsClasses.time;
        });
        setGroups(filteredClasses);
      }
    }
  }, [selectedAssignmentsClasses]);

  const getExchanges = async () => {
    try {
      const { data } = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/api/v1/exchanges/exchange/all`);
      setExchanges(data);
    } catch (e) {
      console.log(e);
    }
  };

  useEffect(() => {
    const getAssignmentsGroups = async () => {
      try {
        const { data } = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/api/v1/commisions/user/assignments`);
        const classes = data.filter((el: any) => el.type === 'CLASS');
        setAssignmentsClasses(classes);
      } catch (e) {
        console.log(e);
      }
    };
    getExchanges();
    getCurrentTour();
    getAssignmentsGroups();
  }, [isTransferOpen, save]);

  const createExchange = async (groupsIds: Array<number>) => {
    try {
      const response = await axiosInstance.post(
        `${process.env.REACT_APP_API_URL}/api/v1/exchanges/exchange`,
        JSON.stringify({ assignment: groupsIds[0], group: groupsIds[1] }),
      );
    } catch (e) {
      console.log(e);
    }
    setSelectedGroup('');
    setSelectedAssignmentsClasses('');
    setSave(!save);
  };

  const getCurrentTour = async () => {
    try {
      const { data } = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/api/v1/configurator/config/tour`);
      setTour(data.currentTour);
    } catch (e) {
      console.log(e);
    }
  };

  const deleteExchange = async (id: number) => {
    try {
      const response = await axiosInstance.delete(`${process.env.REACT_APP_API_URL}/api/v1/exchanges/exchange/${id}`);
      getExchanges();
    } catch (e) {
      console.log(e);
    }
  };

  return (
    <div>
      <Modal
        className={classes.wrapper}
        open={isTransferOpen}
        onClose={handleClose}
        aria-labelledby="simple-modal-title"
        aria-describedby="simple-modal-description"
      >
        <Fade in={isTransferOpen}>
          {tour === 'FIRST_TOUR' ? (
            <TransferStyled>
              <Information src={InformationIcon}></Information>
              <p>Wymiana przedmiotami jest dostępna dopiero podczas drugiej tury</p>
             <p>Wymianie podlegają tylko zaakceptowane grupy przedmiotów</p>
              <p>Wymiana grupami odbywa się tylko w obrębie danego przedmiotu</p></TransferStyled>
          ) : (
            <TransferStyled>
              <InputWrapper>
                <TransferGiveStyled>
                  <TransferTextStyled>Oddam</TransferTextStyled>
                  <TransferInputStyled>
                    <FormControl>
                      <Select
                        labelId="demo-simple-select-label"
                        id="assignments-groups"
                        value={selectedAssignmentsClasses}
                        onChange={handleSelectedAssignmentsGroupChange}
                        placeholder="Wyszukaj..."
                        style={{ width: '200px' }}
                      >
                        {assignmentsClasses.map((el: any, index: number) => {
                          return (
                            <MenuItem
                              key={index}
                              value={el}
                              style={{
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                textAlign: 'center',
                              }}
                            >
                              {`${el.name}  `}
                              <br></br>
                              {`(${dayMapping[el.day]} ${el.time} - ${el.endTime})`}
                            </MenuItem>
                          );
                        })}
                      </Select>
                    </FormControl>
                  </TransferInputStyled>
                </TransferGiveStyled>
                <SaveWrapper>
                  {' '}
                  <SaveButton
                    onClick={() => {
                      createExchange([selectedAssignmentsClasses.id, selectedGroup.id]);
                    }}
                  >
                    Zaproponuj wymianę
                  </SaveButton>
                </SaveWrapper>
                <TransferReceiveStyled>
                  <TransferTextStyled>Przyjmę</TransferTextStyled>
                  <TransferInputStyled>
                    <FormControl disabled={selectedAssignmentsClasses ? false : true}>
                      <Select
                        labelId="demo-simple-select-label"
                        id="assignments-groups"
                        value={selectedGroup}
                        onChange={handleGroupsChange}
                        placeholder="Wyszukaj..."
                        style={{ width: '200px' }}
                      >
                        {groups.map((el: any, index: number) => {
                          return (
                            <MenuItem
                              key={index}
                              value={el}
                              style={{
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                textAlign: 'center',
                              }}
                            >
                              {`${selectedAssignmentsClasses.name}  `}
                              <br></br>
                              {`(${dayMapping[el.day]} ${el.time} - ${el.endTime})`}
                            </MenuItem>
                          );
                        })}
                      </Select>
                    </FormControl>
                  </TransferInputStyled>
                </TransferReceiveStyled>
              </InputWrapper>
              <ExchangesWrapper>
                {exchanges ? (
                  exchanges.map((name: any, index: number) => (
                    <ExchangesRow key={index}>
                      {' '}
                      <Exchange>
                        <ExchangeTitle>{name.courseName}</ExchangeTitle>
                        <ExchangeParagraph>{name.ownedAssignment.lecturer} </ExchangeParagraph>
                        <ExchangeParagraph> {dayMapping[name.ownedAssignment.day]} </ExchangeParagraph>
                        <ExchangeParagraph>
                          {name.ownedAssignment.time} - {name.ownedAssignment.endTime}
                        </ExchangeParagraph>
                      </Exchange>
                      <Icon alt="transfer" src={TransferIcon} />
                      <Exchange>
                        <ExchangeTitle>{name.courseName}</ExchangeTitle>
                        <ExchangeParagraph>{name.desiredGroup.lecturer} </ExchangeParagraph>
                        <ExchangeParagraph> {dayMapping[name.desiredGroup.day]} </ExchangeParagraph>
                        <ExchangeParagraph>
                          {name.desiredGroup.time} - {name.desiredGroup.endTime}
                        </ExchangeParagraph>
                      </Exchange>{' '}
                      <BinIcon
                        onClick={(e) => {
                          e.stopPropagation();
                          const id = Number(e.currentTarget.id);
                          deleteExchange(id);
                        }}
                        id={name.id}
                      ></BinIcon>
                    </ExchangesRow>
                  ))
                ) : (
                  <div></div>
                )}
              </ExchangesWrapper>
            </TransferStyled>
          )}
        </Fade>
      </Modal>
    </div>
  );
};