const useState = React.useState;
const useEffect = React.useEffect;

let MAIL_DATA = [
  {
    title: "Does this app looks good?",
    sender: "Unknown User <user@mail.com>",
    date: Date.now() - 10000,
    read: false,
    content: 'Guys, I found this app called Google https://google.com.\n\nHas anyone used it yet? How does it compared to DuckDuckGo?'
  },
  {
    title: "New comment on thefullsnack.com",
    sender: "Unknown User <user@mail.com>",
    date: Date.now() - 20000,
    read: false,
    content: 'Huy has left a new comment on thefullsnack.com:\n\n> "Wow, what a great article!!! Thanks dude!"'
  },
  {
    title: "Want to try a new mail app?",
    sender: "Huy <huy@mail.com>",
    date: Date.now(),
    read: true,
    selected: true,
    content: 'Hi all,\n\nI\'ve published my new email client called nocrapinbox and it\'s open sourced as well!\n\nIf you\'re interested, please check my repo.\n\nThanks,\nHuy'
  },
  {
    title: "Your Amazon order has been shipped",
    sender: "Unknown User <user@mail.com>",
    date: Date.now() - 20000,
    read: true,
    content: 'Your order has been shipped.'
  },
  {
    title: "Re: Does this app looks good?",
    sender: "Unknown User <user@mail.com>",
    date: Date.now() - 10000,
    read: true,
    content: 'You must be from the moon.'
  },
  {
    title: "New comment on thefullsnack.com",
    sender: "Unknown User <user@mail.com>",
    date: Date.now() - 20000,
    read: false,
    content: 'Huy has replied to a comment on thefullsnack.com:\n\n> "Thanks dude!"'
  },
  {
    title: "Re: Your Amazon order has been shipped",
    sender: "Unknown User <user@mail.com>",
    date: Date.now() - 20000,
    read: true,
    content: 'Your order has been shipped.'
  }
];

const formatDateTime = time => {
  let parsed = new Date(time);
  return `${parsed.toLocaleString()}`;
};

const formatEmailContent = str => {
  return str.replace(/\n/g, '<br/>');
};

const formatEmailReplyContent = str => {
  return str.split("\n").map(line => "> " + line).join("\n");
};


const readStyle = read => read ? 'text-grey' : 'font-semibold';

const selectedStyle = (selected, index) => (selected === index) ? 'text-white bg-purple-light' : '';

const markedAsDeletedStyle = marked => marked ? 'line-through text-red' : '';

const EmptyInboxItem = props => {
  if (props.count) return null;
  return <tr>
    <td colSpan="4" className="text-center bg-grey-lightest p-5">Wow! You emptied your inbox!</td>
  </tr>;
};

const InboxItem = props => {
  return <tr className={`bg-white text-left ${readStyle(props.email.read)} ${selectedStyle(props.selected, props.index)} ${markedAsDeletedStyle(props.email.deleted)}`}>
    <td className="p-2 w-1/5">{formatDateTime(props.email.date)}</td>
    <td className="p-2">{props.email.sender.split(/\s</)[0]}</td>
    <td className="p-2">{props.email.title}</td>
  </tr>;
};

const EmailContent = props => {
  if (!props.email || !props.email.content) return null;
  return <div className="p-2">
    <p><span className="font-semibold">Date:</span> {formatDateTime(props.email.date)}</p>
    <p><span className="font-semibold">From:</span> {props.email.sender}</p>
    <p><span className="font-semibold">Subject:</span> {props.email.title}</p>
    <p></p>
    <p className="mt-5" dangerouslySetInnerHTML={{__html: formatEmailContent(props.email.content)}}></p>
  </div>;
};

let emailReplyTextArea = null;
const EmailReply = props => {
  if (!props.isReply) return null;
  return <div className="mt-3">
    <textarea className="w-full p-2 resize-none h-64"
      ref={(input) => { emailReplyTextArea = input; }}>
      {"\n\n" + formatEmailReplyContent(props.email.content)}
    </textarea>
  </div>;
};

const Inbox = props => {
  const [selectedIndex, setSelectedIndex] = useState(0);
  const [isReplyState, setReplyState] = useState(false);
  
  const increase = val => val + 1;
  const decrease = val => val - 1;
  const getSelectedEmail = () => {
    if (selectedIndex < MAIL_DATA.length)
      return MAIL_DATA[selectedIndex];
    return null;
  };
  const selectFirst = () => {
    setSelectedIndex(0);
  };
  const selectNext = () => {
    if (selectedIndex < MAIL_DATA.length-1) {
      setSelectedIndex(increase(selectedIndex));
    }
  };
  const selectPrev = () => {
    if (selectedIndex > 0) {
      setSelectedIndex(decrease(selectedIndex));
    }
  };
  const toggleReadStatus = () => {
    getSelectedEmail().read = !getSelectedEmail().read;
  };
  const toggleDeleteStatus = () => {
    getSelectedEmail().deleted = !getSelectedEmail().deleted;
  };
  const deleteAllMarked = () => {
    MAIL_DATA = MAIL_DATA.filter(m => !m.deleted);
  };
  
  const startReplying = () => {
    setReplyState(true);
    if (emailReplyTextArea) {
      emailReplyTextArea.focus();
    }
  };
  const stopReplying = () => {
    setReplyState(false);
  };
  
  useEffect(() => {
    const onKeyPress = e => {
      if (!isReplyState) {
        switch (e.key) {
          case "j": 
            selectNext();
            stopReplying()
            break;
          case "k":
            selectPrev();
            stopReplying()
            break;
          case "m":
            toggleReadStatus();
            selectNext();
            stopReplying()
            break;
          case "d":
            toggleDeleteStatus();
            selectNext();
            stopReplying()
            break;
          case "X":
            deleteAllMarked();
            selectFirst();
            stopReplying()
            break;
          case "r":
            startReplying();
            break;
        } 
      } else {
        switch (e.key) {
          case "Escape":
            stopReplying();
            break;
        }
      }
    };
    window.addEventListener('keypress', onKeyPress);
    return function cleanup() {
      window.removeEventListener('keypress', onKeyPress);
    };
  });
  
  return <div>
    <div className="text-white text-xl font-medium mb-2">Inbox</div>
    <div className="bg-grey-lightest rounded-lg shadow-lg overflow-hidden text-xs">
      <table className="bg-grey-light w-full">
        <tr className="text-left">
          <th className="p-2">Date</th>
          <th className="p-2">From</th>
          <th className="p-2">Subject</th>
        </tr>
        <tbody>
          { MAIL_DATA.map((email, idx) => <InboxItem index={idx} key={idx} selected={selectedIndex} email={email}/>) }
          <EmptyInboxItem count={MAIL_DATA.length} />
        </tbody>
      </table>
      <EmailContent email={getSelectedEmail()}/>
      <EmailReply email={getSelectedEmail()} isReply={isReplyState}/>
    </div>
    <div className="text-xs text-indigo-lighter mt-3">j / k: move up or down<br/>r: reply - esc: exit reply mode<br/>d: mark as deleted - X: delete all marked<br/>m: mark as read or unread<br/>/: search</div>
  </div>;
};

ReactDOM.render(<Inbox/>, document.querySelector("#root"));