import { useEffect, useState } from 'react';
import styled from 'styled-components';
import { SessionTheme } from '../themes/SessionTheme';
import { switchThemeTo } from '../themes/switchTheme';
import { fetchNodeLog } from '../util/logging';
import { SessionButton, SessionButtonType } from './basic/SessionButton';
import { SessionIconButton } from './icon';
import { CopyToClipboardButton } from './buttons';
import { Flex } from './basic/Flex';

const StyledContent = styled.div`
  background-color: var(--modal-background-content-color);
  color: var(--modal-text-color);
  font-family: var(--font-default);

  display: flex;
  flex-direction: column;
  padding: 20px;
  height: 100%;

  .session-button {
    margin: 1rem auto 1rem 0;
    padding: 1rem;
    width: fit-content;
  }

  .session-icon-button {
    float: right;
  }

  h1 {
    color: var(--modal-text-color);
  }

  textarea {
    flex-grow: 1;
    width: 100%;
    box-sizing: border-box;
    padding: var(--margins-md);
    background-color: var(--input-background-color);
    color: var(--input-text-color);
    border: 2px solid var(--border-color);
    border-radius: 4px;
    resize: none;
    min-height: 100px;

    font-family: var(--font-debug);
    font-size: 12px;
    line-height: 18px;
  }
`;

const DebugLogTextArea = (props: { content: string }) => {
  return <textarea spellCheck="false" rows={10} value={props.content} style={{ height: '100%' }} />;
};

const DebugLogButtons = (props: { content: string }) => {
  return (
    <Flex
      container={true}
      width={'fit-content'}
      justifyContent={'flex-start'}
      alignItems={'center'}
      flexGap="var(--margins-md)"
      className="buttons"
    >
      <SessionButton
        text={window.i18n('saveLogToDesktop')}
        buttonType={SessionButtonType.Simple}
        onClick={() => {
          if (props.content.length <= 20) {
            // loading
            return;
          }
          (window as any).saveLog(props.content);
        }}
      />
      <CopyToClipboardButton
        copyContent={props.content}
        buttonType={SessionButtonType.Simple}
        hotkey={true}
      />
    </Flex>
  );
};

const DebugLogViewAndSave = () => {
  const [content, setContent] = useState(window.i18n('loading'));

  useEffect(() => {
    const operatingSystemInfo = `Operating System ${window.getOSRelease()}`;

    const commitHashInfo = window.getCommitHash() ? `Commit ${window.getCommitHash()}` : '';

    // eslint-disable-next-line more/no-then
    fetchNodeLog()
      .then((text: any) => {
        const debugLogWithSystemInfo = `${operatingSystemInfo} ${commitHashInfo} ${text}`;
        setContent(debugLogWithSystemInfo);
      })
      // eslint-disable-next-line no-console
      .catch(console.error);
  }, []);

  return (
    <>
      <DebugLogTextArea content={content} />
      <DebugLogButtons content={content} />
    </>
  );
};

export const DebugLogView = () => {
  useEffect(() => {
    if (window.theme) {
      void switchThemeTo({
        theme: window.theme,
        usePrimaryColor: true,
      });
    }
  }, []);

  return (
    <SessionTheme runSetup={false}>
      <StyledContent>
        <div>
          <SessionIconButton
            aria-label="close debug log"
            iconType="exit"
            iconSize="medium"
            onClick={() => {
              window.closeDebugLog();
            }}
          />
          <h1> {window.i18n('debugLog')} </h1>
          <p> {window.i18n('debugLogExplanation')}</p>
        </div>
        <DebugLogViewAndSave />
      </StyledContent>
    </SessionTheme>
  );
};