import React, { useEffect, useCallback, useState, useRef, useMemo } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { getContentGroup } from '../../../actions/getContentGroup';
import _debounce from 'lodash.debounce';
import {
  selectContentGroupData,
  selectContentGroupStatuses
} from '../../../selectors/getContentGroup';
import { RenderController } from '../../../../Common/components/RenderController';
import { css } from 'aphrodite';
import * as styles from './styles';
import { Breadcrumbs } from '../../../../Common/components/Breadcrumbs';
import { Button } from '../../../../FormComponents/components/Button';
import { Input } from '../../../../FormComponents/components/Input';
import { Table } from '../../../../Common/components/Table';
import { NavLink } from 'react-router-dom';
import {
  colorLightBlue,
  colorLightGray,
  colorRed,
  commonStyles
} from '../../../../../core/styles/styles';
import { modalAdd, modalRemove } from 'Modal/actions';
import { Modal } from 'Modal';
import AddCircle from 'icons/addCircle.svg';
import RemoveCircle from 'icons/removeCircle.svg';
import moment, { duration } from 'moment';
import { BrowseFlyerRuns } from '../../../../FlyerRuns/components/BrowseFlyerRuns';
import { baseRules } from '../../../../../core/constants';
import { useForm } from '../../../../Common/hooks';
import { sendDeleteContentGroup } from '../../../actions/deleteContentGroup';
import { sendUpdateContentGroupFormData } from '../../../actions/updateContentGroup';

// TODO  fix redux structure!!! separate content groups inside campaign groups
export const ContentGroup = ({
  match: {
    params: { id, campaignGroupName, contentGroupId }
  }
}) => {
  const dispatch = useDispatch();

  //copy
  const [activeMerchant, setActiveMerchant] = useState(null);
  const [activeRemoveFlyerRun, setActiveRemoveFlyerRun] = useState({
    merchantId: null,
    flyerRunId: null
  });

  //copy
  const closeModal = useCallback(() => dispatch(modalRemove('flyerRuns')), [dispatch]);
  //copy
  const addModal = useCallback(
    id => {
      setActiveMerchant(id);
      dispatch(modalAdd('flyerRuns'));
    },
    [dispatch]
  );

  useEffect(() => {
    dispatch(getContentGroup(id, contentGroupId));
  }, []);

  const { contentGroupStatus, contentGroupData } = useSelector(state => ({
    contentGroupStatus: selectContentGroupStatuses(state).get,
    contentGroupData: selectContentGroupData(state)
  }));
  const { name, elements, secondaryId } = contentGroupData;

  const links = [
    { link: '/campaignGroups/home', name: 'Campaigns groups' },
    { link: `/campaignGroups/${id}/`, name: `${campaignGroupName}` },
    { link: `/campaignGroups/${id}/contentGroup/${contentGroupId}`, name: `${name}` }
  ];

  const initialState = {
    name: '',
    elements: []
  };

  const { values, errors, handleChange, handleSubmit, setValue } = useForm(initialState);

  // TODO create custom hook debounce
  const refValues = useRef(values);
  refValues.current = values;
  const sendUpdate = data => {
    dispatch(sendUpdateContentGroupFormData(id, contentGroupId, data ? data : refValues.current));
  };
  const delayedQuery = useMemo(() => _debounce(() => sendUpdate(), 1000), []);

  useEffect(() => {
    setValue(contentGroupData);
  }, [contentGroupData]);

  // copy
  const renderFlyerRunName = (name, id, availableFrom, availableTo) =>
    `${moment(availableFrom).format('ddd YYYY-MM-DD')} to ${moment(availableTo).format(
      'ddd YYYY-MM-DD'
    )} - ${name} (${id})`;

  const handleClick = (id, name, allFlyerRunData) => {
    const data = {
      ...values,
      elements: elements.map(item =>
        item.merchant_id === activeMerchant
          ? { ...item, flyer_runs: [...item.flyer_runs, { ...allFlyerRunData }] }
          : item
      )
    };
    // TODO fix sendUpdate
    // TODO fix sendUpdate
    // TODO fix sendUpdate
    setValue(data);
    sendUpdate(data);
  };

  const deleteFlyerRun = () => {
    const data = {
      ...values,
      elements: values.elements.map(item => {
        return item.merchant_id === activeRemoveFlyerRun.merchantId
          ? {
              ...item,
              flyer_runs: item.flyer_runs.filter(
                item => +item.id !== +activeRemoveFlyerRun.flyerRunId
              )
            }
          : item;
      })
    };
    setValue(data);
    sendUpdate(data);
    dispatch(modalRemove('deleteFlyerRun'));
  };

  // copy
  const removeFlyerRun = (merchantId, flyerRunId) => {
    setActiveRemoveFlyerRun({ merchantId, flyerRunId });
    dispatch(modalAdd('deleteFlyerRun', `Remove flyer run`));
  };

  // TODO add memo?
  const addCircleIcon = (handler = () => null, isActive = true) => (
    <AddCircle
      width={18}
      height={18}
      fill={isActive ? colorLightBlue : colorLightGray}
      onClick={handler}
      className={css(styles.regular.icon)}
    />
  );

  const jsxColumns = id => [
    {
      id: 'name',
      name: (
        <span className={css(styles.regular.flyerRunTitle)}>
          Flyer Runs {addCircleIcon(() => addModal(id))}
        </span>
      ),
      width: '45%'
    },
    {
      id: 'select_items',
      name: 'Select Items',
      width: '15%'
    },
    {
      id: 'tag',
      name: 'Tag',
      width: '10%'
    },
    {
      id: 'qc',
      name: 'QC',
      width: '10%'
    },
    {
      id: 'synced',
      name: 'Last Synced',
      width: '20%'
    }
  ];

  const jsxRows = (merchant_id, elements) =>
    elements.map(({ name, id, available_from, available_to, select_items, tag, qc, synced }) => ({
      name: (
        <span className={css(styles.regular.flyerRunName)}>
          {renderFlyerRunName(name, id, available_from, available_to)}
          <RemoveCircle
            width={18}
            height={18}
            fill={colorRed}
            onClick={() => removeFlyerRun(merchant_id, id)}
            className={css(styles.regular.icon)}
          />
        </span>
      ),
      select_items: select_items
        ? select_items
        : addCircleIcon(() => console.log('api for selected items ')),
      tag: tag
        ? tag
        : select_items
        ? addCircleIcon(() => console.log('api for tag '))
        : addCircleIcon(() => null, false),
      qc: qc
        ? qc
        : select_items && tag
        ? addCircleIcon(() => console.log('api for qc '))
        : addCircleIcon(() => null, false),
      synced
    }));

  return (
    <div>
      <RenderController statuses={[contentGroupStatus]}>
        <div className={css(styles.regular.root)}>
          <Breadcrumbs links={links} />
          <div className={css(styles.regular.titleLine)}>
            <span className={css(styles.regular.contentGroupName)}>{name}</span>
            <Button template="delete" onClick={() => dispatch(modalAdd('deleteContentGroup'))} />
          </div>
          <div className={css(styles.regular.content)}>
            <div className={css(styles.regular.input)}>
              <Input
                value={values.name}
                label="Name"
                name="name"
                onChange={e => {
                  handleChange(e);
                  delayedQuery();
                }}
              />
            </div>
            <div className={css(styles.regular.merchants)}>
              <span className={css(styles.regular.merchantsTitle)}>Merchants</span>
              {!!values.elements.length &&
                values.elements.map(({ merchant_name, merchant_id, flyer_runs }) => (
                  <div key={merchant_id} className={css(styles.regular.merchant)}>
                    <span className={css(styles.regular.merchantName)}>{merchant_name}</span>
                    {!!flyer_runs.length ? (
                      <div className={css(styles.regular.tableWrap)}>
                        <Table
                          columns={jsxColumns(merchant_id)}
                          rows={jsxRows(merchant_id, flyer_runs)}
                          isStriped={true}
                        />
                      </div>
                    ) : (
                      <div className={css(styles.regular.emptyFlyerRuns)}>
                        {/* copy */}
                        <span className={css(styles.regular.emptyFlyerRunsText)}>Flyer Runs</span>
                        <Button
                          label="Add"
                          onClick={() => addModal(merchant_id)}
                          template="filled"
                          additionalStyles={{
                            minWidth: 'unset',
                            minHeight: 'unset',
                            padding: '5px 15px'
                          }}
                        />
                      </div>
                    )}
                  </div>
                ))}
            </div>
          </div>
        </div>
      </RenderController>
      {/* // copy */}
      <Modal type="default" name="flyerRuns" width="1300px" showCloseButton={false}>
        <BrowseFlyerRuns
          closeModal={closeModal}
          handleClick={handleClick}
          selectedFlyerRuns={
            values.elements.find(({ merchant_id }) => merchant_id === activeMerchant)?.flyer_runs
          }
          currentMerchantId={activeMerchant}
        />
      </Modal>
      <Modal
        type="delete"
        name="deleteFlyerRun"
        showCloseButton={false}
        onConfirm={deleteFlyerRun}
      />
      <Modal
        type="delete"
        name="deleteContentGroup"
        showCloseButton={false}
        onConfirm={() => {
          dispatch(sendDeleteContentGroup(contentGroupData.id, secondaryId, id, values.name));
        }}
      />
    </div>
  );
};