import { escapeHtmlShitty, HtmlEnt, JSX } from './jsx';

const { readFileSync } = require("fs");
const contents = readFileSync(0);
const lines: string[] = contents.toString().split('\n');

type IrcUser = {
  mode?: '+' | '@' | ' ',
  name: string
};

type IrcMessage = {
  time: string,
  type: 'status',
  content: string
} | {
  time: string,
  type: 'action',
  user: IrcUser,
  content: string
} | {
  time: string,
  type: 'message',
  user: IrcUser,
  content: string
};

function parse(s: string): IrcMessage {
  s = s.trimEnd();
  const time = s.slice(0, 5);
  switch(s[6]) {
    case '-':
      return {
        time,
        type: 'status',
        content: s.slice(10)
      };
    case '<': {
      const mode = s[7];
      if (mode !== '@' && mode !== '+' && mode !== ' ') throw `invalid mode: ${mode}`;
      const name = s.slice(8).split('>')[0];
      return {
        time,
        type: 'message',
        user: { mode, name },
        content: s.slice(10 + name.length)
      }
    }
    case ' ': {
      const name = s.slice(8).split(' ')[1];
      return {
        time,
        type: 'action',
        user: { name },
        content: s.slice(10 + name.length)
      }
    }
  }
  throw `couldn't parse message ${s}`;
};

const messages = lines.map(l => l.trim()).filter(l => l !== '.' && l !== "").map((v, i) => { try { return parse(v) } catch(e) { throw `${e} ${i}` } });

type MsgGroup = {
  user?: IrcUser,
  type: "status" | "message" | "action",
  messages: IrcMessage[]
}

function group(messages: IrcMessage[]): MsgGroup[] {
  const groups: MsgGroup[] = [];

  let group: IrcMessage[] = [];
  let discrim: IrcUser | undefined = undefined;
  let type: "status" | "action" | "message" | undefined = undefined;

  for (const m of messages) {
    if (m.type === "status") {
      groups.push({
        user: discrim,
        type: type ?? "message",
        messages: group
      });

      discrim = undefined;
      type = "status";
      group = [];
      groups.push({
        type: m.type,
        messages: [m]
      })
      continue;
    } else if (discrim !== undefined && (m.user.mode === undefined || m.user.mode === discrim.mode) && m.user.name === discrim.name) {
      group.push(m)
    } else {
      if (group.length !== 0)
        groups.push({
          user: discrim,
          type: type ?? "message",
          messages: group
        });
      group = [m];
      discrim = m.user;
      type = m.type;
    }
  }

  if (group.length !== 0) {
    if (type === "status") {
      groups.push({
        user: undefined,
        type,
        messages: group
      })
    } else if (discrim !== undefined) {
      groups.push({
        user: discrim,
        type: type ?? "message",
        messages: group
      });
    }
  }

  return groups;
}

const groups = group(messages);

const Message = ( {message, inclTs }: { message: IrcMessage, inclTs?: boolean }) => {
  let txt = escapeHtmlShitty(message.content);
  if (message.type === "action") {
    txt = "* " + txt;
  }
  return <div class={ `mg-m mg-${message.type}` }>
    {
      (inclTs === undefined || inclTs === true) ? <span class="mg-ts"> { message.time } </span> : undefined
    }
    <span class={ `mg-txt mg-${message.type}` }> { txt } </span>
  </div>
}

function renderMessageGroup(m: MsgGroup): HtmlEnt {
  const u = m.user;
  console.error(m);
  if (u !== undefined) {
    return <div class="mg-user">
      <div class="mg-pfp">
        <img src={ `https://offtopia.org/pages/people/${u.name.toLocaleLowerCase()}.jpg` } alt={ `${u.name}'s profile picture`} />
      </div>
      <div class="mg-contents">
        <span class="mg-ts-u">
          <span class="mg-ts-u-u"> { m.user?.name } </span>
          <span class="mg-ts-u-ts"> { m.messages[0].time } </span>
        </span>

        <Message message={m.messages[0]} inclTs={false} />

        {
          m.messages.slice(1).map(x => 
            <Message message={x} />
          )
        }
      </div>
    </div>
  } else {
    if (m.messages.length < 1) {
      return <span />
    }

    return <div class="mg-no-user">
      { m.messages.map(x => <Message message={x} />) }
    </div>;
  }
}

const rendered = groups.map(renderMessageGroup);

const elem = <html>
  <body>
    { rendered }
    <svg id="squircle-container" width="0" height="0">
      <clipPath id="squircle" clipPathUnits="objectBoundingBox">
        <path fill="red" stroke="none" d="M 0,0.5 C 0,0 0,0 0.5,0 S 1,0 1,0.5 1,1 0.5,1 0,1 0,0.5" />
      </clipPath>
    </svg>
  </body>
  <style>
    { readFileSync("style.css") }
  </style>

</html>;

console.log(elem.toHtmlStr());