import React, { useRef, useState } from 'react';
import { addDays } from 'date-fns';
import { useClickAway } from 'react-use';
import { DateRangePicker } from 'react-date-range';
import 'react-date-range/dist/styles.css'; // main css file
import 'react-date-range/dist/theme/default.css'; // theme css file
import styled from 'styled-components';
import { filterResponseList } from '../../../redux/action-creators/form-actions/forms.actions';
import { connect } from 'react-redux';

const DateRangeSelect = ({ openDatePicker, filterResponseList, formId }) => {
  const [state, setState] = useState({
    selection: {
      startDate: new Date(),
      endDate: null,
      key: 'selection',
    },
    compare: {
      startDate: new Date(),
      endDate: addDays(new Date(), 3),
      key: 'compare',
    },
  });
  const dateRef = useRef(null);
  useClickAway(dateRef, () => {
    // setOpenDatePicker(false);
  });

  const onFilterResponseList = async dateRange => {
    if (dateRange.compare) {
      const details = {
        startDate: dateRange?.compare?.startDate?.toISOString(),
        endDate: dateRange?.compare?.endDate?.toISOString(),
      };
      filterResponseList(formId, 'date', details);
    }
  };

  return (
    <div>
      <FilterDropDown ref={dateRef}>
        <div className={openDatePicker ? 'drop-wrapper active' : ''}>
          <DateRangePicker
            onChange={range => {
              setState({ ...state, ...range });
              onFilterResponseList(range);
            }}
            months={1}
            minDate={addDays(new Date(), -300)}
            direction="vertical"
            scroll={{ enabled: true }}
            ranges={[state.compare]}
            maxDate={new Date()}
          />
        </div>
      </FilterDropDown>
    </div>
  );
};

export default connect(null, { filterResponseList })(DateRangeSelect);

const FilterDropDown = styled.div`
  position: relative;
  .drop-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--co-body);
    font-family: var(--ff-medium);
    font-size: var(--font-14);
    padding: 0.5rem 1.5rem;
    svg {
      width: 1.6rem;
      height: 1.6rem;
    }
    span {
      font-family: var(--ff-medium);
      font-size: var(--font-14);
      display: none;
    }
    &:hover {
      color: var(--co-primary);
    }
    > *:last-child:not(only-child) {
      margin-left: 0.8rem;
    }
    @media (min-width: 768px) {
      span {
        display: block;
      }
    }
  }
  .drop-down {
    color: var(--co-primary);
    font-family: var(--ff-sbold);
    span {
      font-family: var(--ff-sbold);
      text-transform: none;
    }
    svg {
      width: 10px;
      height: 10px;
    }
  }
  .drop-wrapper {
    position: absolute;
    visibility: hidden;
    box-shadow: var(--shadow);
    width: 300px;
    border-radius: 8px;
    background: #fff;
    left: 0;
    top: 100%;
    z-index: 6;
    &.active {
      visibility: visible;
    }
  }

  .drop-list {
    padding: 1rem 0;
    li {
      display: flex;
      align-items: center;
      font-family: var(--ff-medium);
      font-size: var(--font-16);
      color: var(--co-body);
      padding: 1rem 1.5rem;
      text-transform: capitalize;
      cursor: pointer;
      svg {
        width: 12px;
        height: 12px;
        margin-right: 1rem;
        opacity: 0;
      }
      &.active {
        svg {
          opacity: 1;
        }
      }

      &:hover {
        color: var(--co-primary);
      }
    }
  }
`;
