text: import styled from 'styled-components';
  import { useState, useEffect, useRef } from 'react';
  import { borderRadius, color } from 'shared/utils/styles';
  import Checkbox from 'shared/components/Checkbox';
  import { useRouteMatch, useHistory } from 'react-router-dom';
  import Delete from 'Project/Delete';
  import { formatDate } from 'shared/utils/dateTime';
  import { Fragment } from 'react';
  import Card from 'Project/Card';
  import { boxShadow } from 'shared/utils/styles';
  
  const SingleRow = ({
    cardClicked,
    setCardClicked,
    isPreviewOpen,
    setIsPreviewOpen,
    cardId,
    due,
    reviewCount,
    content,
    checked,
    selected,
    setSelected,
    handleDeleteCard,
    ...props
  }) => {
    const match = useRouteMatch();
    const history = useHistory();
    const [show, setShow] = useState(true);
    const [isMouseOverRow, setIsMouseOverRow] = useState(false);
    const cardDue = new Date(due);
    const timeoutRef = useRef(null);
  
    const handleClick = () => {
      setIsPreviewOpen({ isOpen: true, cardId: cardId });
      setCardClicked(cardId);
      history.push(`${match.url}/${cardId}`);
    };
  
    const handleCheck = (e) => {
      e.stopPropagation();
      setSelected({ ...selected, [cardId]: !checked });
    };
  
    const handleDelete = (e) => {
      handleDeleteCard(cardId);
    };
  
    const dateToInformalText = (due) => {
      const today = new Date();
      const tomorrow = new Date().setDate(today.getDate() + 1);
      const thisWeek = new Date().setDate(today.getDate() + 7);
      const nextWeek = new Date().setDate(today.getDate() + 14);
  
      if (due <= today) {
        return 'Now';
      } else if (due > today && due <= tomorrow) {
        return 'Tomorrow';
      } else if (due > tomorrow && due <= thisWeek) {
        return 'Few days';
      } else if (due > thisWeek && due <= nextWeek) {
        return 'Next week';
      } else {
        return formatDate(due);
      }
    };
  
    return (
      <Row
        onMouseOver={() => setIsMouseOverRow(true)}
        onMouseOut={() => setIsMouseOverRow(false)}
        onClick={handleClick}
        checked={checked}
        show={show}
        cardClicked={isPreviewOpen.cardId === cardId}
      >
        <Selectable>
          <Checkbox
            onClick={handleCheck}
            checked={checked}
            isMouseOverRow={isMouseOverRow}
          />
        </Selectable>
        <Content>
          <Category width={isPreviewOpen.isOpen ? '100%' : '40%'}>
            <Title to={`${match.url}/${cardId}`}>
              {content}
              {reviewCount === 0 && <NotificationNew />}
              {new Date(due) <= new Date() && <NotificationDue />}
            </Title>
          </Category>
          {isPreviewOpen.isOpen ? null : (
            <Fragment>
              <Category width="30%">
                {cardDue && dateToInformalText(cardDue)}
              </Category>
              <Category width="15%">{reviewCount}</Category>
              <Category width="15%">
                <VisibilityWrapper>
                  <Options isMouseOverRow={isMouseOverRow}>
                    <Delete
                      styleVariant="selection"
                      modalClose={null}
                      handleDelete={(e) => handleDelete(e)}
                    />
                  </Options>
                </VisibilityWrapper>
              </Category>
            </Fragment>
          )}
        </Content>
      </Row>
    );
  };
  
  const Category = styled.div`
    color: #74787c;
    display: flex;
    align-items: center;
    width: ${(props) => props.width};
  `;
  
  const Selectable = styled.div`
    min-width: 80px;
  `;
  
  const NotificationDue = styled.div`
    width: 8px;
    height: 8px;
    border-radius: 12px;
    margin: 10px;
    background-color: orange;
  `;
  
  const NotificationNew = styled.div`
    width: 8px;
    height: 8px;
    border-radius: 12px;
    margin: 10px;
    background-color: #3fce95;
  `;
  
  const VisibilityWrapper = styled.div`
    display: flex;
    justify-content: flex-end;
    margin-right: 50px;
    height: 50px;
    width: 100%;
  `;
  
  const DueCategory = styled.div`
    display: flex;
    align-items: center;
    width: 25%;
    display: flex;
  
    @media (max-width: 900px) {
      display: none;
    }
  `;
  
  const Options = styled.div`
    display: none;
    align-items: center;
  
    @media (hover: hover) {
      display: ${(props) => (props.isMouseOverRow ? 'flex' : 'none')};
    }
  `;
  
  const Content = styled.div`
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 60px;
  `;
  
  const Title = styled.div`
    display: flex;
    align-items: center;
  `;
  
  const Row = styled.li`
    position: relative;
    z-index: 10;
    display: flex;
    cursor: pointer;
    align-items: center;
    width: 100%;
    height: 75px;
    border: 1px solid transparent;
  
    background-color: ${(props) =>
      props.cardClicked ? '#eef5ff' : 'transparent'};
  
    &:first-child {
      border-top: 1px solid ${color.borderLight};
    }
  
    @media (hover: hover) {
      &:hover {
        box-shadow: ${boxShadow.medium};
        background-color: #eef5ff;
        border-bottom: 1px solid #fff;
        border-top: 1px solid #fff;
        border-left: 1px solid #f4f7f8;
        border-right: 1px solid #f4f7f8;
      }
    }
  
    @media (max-width: 768px) {
      &:first-child {
        border-top: 1px solid ${color.borderLight};
      }
  
      &:last-child {
        border-bottom: 1px solid ${color.backgroundPrimary};
      }
    }
  `;
  
  // border-top: 1px solid ${color.borderLight};
  // border-top: 1px solid
  // ${(props) => (props.checked ? '#e4eefc' : color.borderLight)};
  
  export default SingleRow;
  