import ColorHash from 'color-hash';
import { formatRelative } from 'date-fns';
import * as dom from './dom';

dom.css`
body {
  --theme-backdrop: #1e1e1e;
  --theme-fg: #eeeeee;
  --theme-note-bg: #eeeeee;
  --theme-note-fg: #363636;
  --theme-header-fg: #121212;
}

body.darktheme {
  --theme-backdrop: #1e1e1e;
  --theme-note-bg: #363636;
  --theme-note-fg: #eeeeee;
  --theme-header-fg: #121212;
}

body {
  color: var(--theme-fg);
  background: var(--theme-backdrop);
  font-family: sans-serif;
  font-size: 11px;
}
`;

const now = new Date();
const Time = ({ time }) => {
  const dt = new Date(time);
  return formatRelative(dt, now);
};

dom.css`
.flex-space {
  flex: 1;
}
`;

const Space = () => <div class="flex-space" />;

dom.css`
section {
  position: absolute;
  overflow: hidden;

  width: 22em;
  color: var(--theme-note-fg);
  background: var(--theme-note-bg);

  border-radius: 0.4em;
}

section.tombstone {
  color: var(--theme-note-bg);
  background: var(--theme-note-fg);
}

section > header {
  display: flex;
  flex-direction: row;

  height: 2.5em;
  line-height: 2.5em;

  color: var(--theme-header-fg);
  background: var(--theme-header-bg);
}

section > header.small {
  height: 0.5em;
}

section > header > * {
  margin: 0 0.5em;
}

section > header > img {
  height: 2em;
  width: 2em;
  margin: 0.25em;
  border-radius: 0.2em;
}

section > header > .time {
  font-size: 0.8em;
  color: #363636;
}

section > main {
  padding: 1em;
  font-family: serif;
}

section.tombstone > main {
  font-family: inherit;
}
`;

const colors = new ColorHash({ lightness: 0.8 });
export const Note = ({ id, type, attributedTo, published, content, smallHeader = false, onHide }) => {
  const backgroundColor = attributedTo.color || colors.hex(attributedTo.id);
  const username = attributedTo.name || attributedTo.preferredUsername;

  return (
    <section
      css={{ '--theme-header-bg': backgroundColor }}
      class={type === 'Tombstone' ? 'tombstone' : ''}
      dataset={{ id }}
      onClick={onHide}
    >
      {smallHeader
        ? <header class="small" />
        : <header>
            <img src={new URL(attributedTo.icon.url, attributedTo.id)} />
            <span class="user">{username}</span>
            <Space />
            <span class="time"><Time time={published} /></span>
          </header>
      }
      <main>
        {content}
      </main>
    </section>
  );
};

export const updateColor = (note, { attributedTo }) => {
  const backgroundColor = attributedTo.color || colors.hex(attributedTo.id);
  note.style.setProperty('--theme-header-bg', backgroundColor);
};