import styled from '@emotion/styled';
import { formatDistanceToNow } from 'date-fns';
import React from 'react';

export const AdminWrapper = styled.div`
  padding: 20px;
  max-width: 1000px;
  margin: 20px auto;
  box-shadow: 2px 4px 10px 0 rgba(0, 0, 0, 0.1);
`;

export const ControlArea = styled.div`
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
  margin-top: 20px;
`;

export const AdminButton = styled.button`
  padding: 10px;
  border: none;
  background-color: #f2f2f2;
  cursor: pointer;

  &:hover {
    background-color: #e2e2e2;
  }
`;

const JSONDisplayPre = styled.pre`
  outline: 1px solid #ccc;
  padding: 5px;
  margin: 5px;
  font-size: 12px;
  font-weight: 200;
  max-width: 700px;
  overflow-y: auto;
  overflow-x: scroll;
  .string {
    color: green;
    white-space: normal;
  }
  .number {
    color: darkorange;
  }
  .boolean {
    color: blue;
  }
  .null {
    color: magenta;
  }
  .key {
    color: red;
  }
`;

export const JSONDisplay = (props: { json: any; style?: any }) => {
  const style = props.style || {};
  const json = props.json;
  function syntaxHighlight(json) {
    if (typeof json != 'string') {
      json = JSON.stringify(json, null, 2);
    }
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(
      /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
      function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
          if (/:$/.test(match)) {
            cls = 'key';
          } else {
            cls = 'string';
          }
        } else if (/true|false/.test(match)) {
          cls = 'boolean';
        } else if (/null/.test(match)) {
          cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
      }
    );
  }

  return <JSONDisplayPre style={style} dangerouslySetInnerHTML={{ __html: syntaxHighlight(json) }} />;
};

export const Undefined = (props: { value?: string }) => {
  if (props.value !== undefined && props.value !== null && props.value !== '') {
    return <span>{props.value}</span>;
  }
  return (
    <span
      style={{
        color: '#999',
      }}
    >
      undefined
    </span>
  );
};

export const InteractiveDate = (props: { date: string; prefix?: string }) => {
  const Wrapper = styled.span`
    width: 170px;
    cursor: help;
    text-decoration: underline;
    display: inline-block;
    .absolute {
      display: none;
    }
    &:hover {
      .relative {
        display: none;
      }
      .absolute {
        font-size: 0.8em;
        display: inline;
      }
    }
  `;

  if (!props.date) {
    return <Undefined />;
  }

  return (
    <Wrapper>
      <span className="relative">
        {props.prefix && props.prefix + ' '}
        {formatDistanceToNow(new Date(props.date), { addSuffix: true })}
      </span>
      <span className="absolute">{new Date(props.date).toLocaleString()}</span>
    </Wrapper>
  );
};