const FILL_STYLE = 'lightgray' as const;
const STROKE_STYLE = 'gray' as const;
const FONT_COLOR = 'black' as const;
const FONT = 'sans-serif' as const;

type Params = {
  width: number;
  height: number;
  text?: string;
};

function getMaximumFontFize({ width, height, text = '' }: Params): number {
  const maxHeight = Math.floor(height / 2);
  const maxWidth = Math.floor(width / text.length);

  return Math.min(maxHeight, maxWidth);
}

function fillTextAtCenter({
  ctx,
  height,
  width,
  y,
  text,
}: {
  ctx: CanvasRenderingContext2D;
  height: number;
  width: number;
  y: number;
  text: string;
}): void {
  const fontSize = getMaximumFontFize({ width, height, text });

  ctx.font = `${fontSize}px ${FONT}`;
  ctx.fillText(text, width / 2 - ctx.measureText(text).width / 2, y, width);
}

export function generatePlaceholderImage({ width, height, text }: Params): string | null {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  if (!ctx) {
    return null;
  }

  document.body.appendChild(canvas);

  canvas.width = width;
  canvas.height = height;

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.fillStyle = FILL_STYLE;
  ctx.fillRect(0, 0, width, height);

  ctx.strokeStyle = STROKE_STYLE;
  ctx.strokeRect(0, 0, width, height);

  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(width, height);
  ctx.moveTo(width, 0);
  ctx.lineTo(0, height);
  ctx.stroke();

  ctx.fillStyle = FONT_COLOR;

  fillTextAtCenter({ ctx, height, width, y: height - 5, text: `${width}x${height}` });

  if (text) {
    fillTextAtCenter({ ctx, height, width, y: height / 2 - 5, text });
  }

  const imageData = canvas.toDataURL();
  canvas.remove();
  return imageData;
}

if (process.env.STORYBOOK_ENABLE === 'true') {
  const url1x =
    generatePlaceholderImage({
      width: option.width,
      height: option.height,
    }) ?? '';
  const url2x =
    generatePlaceholderImage({
      width: option.width * 2,
      height: option.height * 2,
    }) ?? '';
  return {
    '1x': url1x,
    '2x': url2x,
  };
}

const fs = require('fs');
const path = require('path');

const fetch = require('node-fetch');

const {
  CIRCLE_SHA1,
  CIRCLE_PULL_REQUEST,
  CIRCLE_PROJECT_USERNAME,
  CIRCLE_PROJECT_REPONAME,
  CIRCLE_PR_NUMBER,
  GITHUB_REPOSITORY_ACCESS_TOKEN,
} = process.env;

if (!CIRCLE_PR_NUMBER && !CIRCLE_PULL_REQUEST) {
  console.log('VRT結果コメントの追加先Pull Requestがありません');
  process.exit(0);
}

const wordToJudgeIsRegReport = 'Storybook スクリーンショットに差分';

function createRegReport() {
  const regOutJsonStr = fs.readFileSync(path.join(__dirname, '../.reg/out.json'), 'utf-8');
  const regOutJson = JSON.parse(regOutJsonStr);

  const newItemCount = regOutJson.newItems.length;
  const diffItemCount = regOutJson.diffItems.length;
  const deletedItemCount = regOutJson.deletedItems.length;
  const passedItemCount = regOutJson.passedItems.length;

  const regConfigJsonStr = fs.readFileSync(path.join(__dirname, '../regconfig.json'), 'utf-8');
  const regConfigJson = JSON.parse(regConfigJsonStr);

  const regCustomUri = regConfigJson.plugins['reg-publish-gcs-plugin'].customUri;
  const regCustomPathPrefix = regConfigJson.plugins['reg-publish-gcs-plugin'].pathPrefix;

  if (newItemCount === 0 && diffItemCount === 0 && deletedItemCount === 0) {
    return `${wordToJudgeIsRegReport}はありません :sparkles:`;
  }

  return `${wordToJudgeIsRegReport}があります。
:white_circle: ${newItemCount} items added
:red_circle: ${diffItemCount} items changed
:black_circle: ${deletedItemCount} items deleted
:large_blue_circle: ${passedItemCount} items passed
[レポート](${regCustomUri}/${regCustomPathPrefix}/${CIRCLE_SHA1}/index.html)を確認してください。
Permanアカウント（\`user.xxxx_xxxx@cloud-identity.perman.jp\`）の認証となります。 :bow:
- [ ] 差分に問題ないことを確認しました`;
}

async function postOrUpdateReportCommentToPr(regReport) {
  /**
   * `CIRCLE_PR_NUMBER` はフォークされた PR でのみ使用できます
   * そのため、`CIRCLE_PULL_REQUEST` から抽出します
   * 詳細 https://circleci.com/docs/ja/2.0/env-vars/
   */
  const pullRequestNumber = CIRCLE_PR_NUMBER || /pull\/(\d+)$/.exec(CIRCLE_PULL_REQUEST)[1];

  const requestHeaders = { Authorization: `token ${GITHUB_REPOSITORY_ACCESS_TOKEN}` };

  const fetchCommentsResult = await fetch(
    `https://api.github.com/repos/${CIRCLE_PROJECT_USERNAME}/${CIRCLE_PROJECT_REPONAME}/issues/${pullRequestNumber}/comments`,
    { headers: requestHeaders },
  ).catch(() => ({ ok: false }));

  const comments = fetchCommentsResult.ok ? await fetchCommentsResult.json() : [];
  const regReportComments = comments.filter(({ body }) =>
    new RegExp(`^${wordToJudgeIsRegReport}`).test(body),
  );
  const commentIdToUpdate = regReportComments[regReportComments.length - 1]?.id;

  // 既存レポートない場合、新規コメントを追加
  if (commentIdToUpdate === undefined) {
    console.log(`${CIRCLE_PULL_REQUEST} にVRT結果コメントを追加します`);

    try {
      const postCommentResult = await fetch(
        `https://api.github.com/repos/${CIRCLE_PROJECT_USERNAME}/${CIRCLE_PROJECT_REPONAME}/issues/${pullRequestNumber}/comments`,
        {
          method: 'post',
          body: JSON.stringify({ body: regReport }),
          headers: requestHeaders,
        },
      );

      if (!postCommentResult.ok) {
        throw new Error(postCommentResult.statusText);
      }

      console.log('コメント追加成功しました');
    } catch (error) {
      console.error('コメント追加失敗しました', error);
    }

    return;
  }

  // 既存レポートがある場合、既存コメントを更新
  console.log(`${CIRCLE_PULL_REQUEST} のVRT結果コメントを更新します`);

  try {
    const patchCommentResult = await fetch(
      `https://api.github.com/repos/${CIRCLE_PROJECT_USERNAME}/${CIRCLE_PROJECT_REPONAME}/issues/comments/${commentIdToUpdate}`,
      {
        method: 'patch',
        body: JSON.stringify({ body: regReport }),
        headers: requestHeaders,
      },
    );

    if (!patchCommentResult.ok) {
      throw new Error(patchCommentResult.statusText);
    }

    console.log('コメント更新成功しました');
  } catch (error) {
    console.error('コメント更新失敗しました', error);
  }
}

postOrUpdateReportCommentToPr(createRegReport()).catch((error) => {
  console.error('VRT 結果通知失敗しました', error);
});

export const decorators = [
  // storycap
  withScreenshot,
  (Story) => {
    const [isMobileViewportBeforeResized, setIsMobileViewportBeforeResized] = useState(
      isMobileViewport(),
    );

    const resizeHandler = useCallback(() => {
      /**
       * @storybook/addon-viewport の mobile viewport に設定したか、
       * mobile viewport 設定から離脱した場合、
       * `loadCSS` を実行させるため、 ページをリロードさせます
       */
      const mobileViewport = isMobileViewport();

      if (
        (!isMobileViewportBeforeResized && mobileViewport) ||
        (isMobileViewportBeforeResized && !mobileViewport)
      ) {
        window.location.reload();
        setIsMobileViewportBeforeResized(true);
      }
    }, []);

    useEffect(() => {
      fromEvent(window, 'resize').pipe(debounceTime(1000)).subscribe(resizeHandler);
    }, []);

    return isMobile() ? (
      <DeviceTypeContextProvider value={DEVICE_TYPE_MOBILE}>
        <div className="adapt-mobile">
          <Story />
        </div>
      </DeviceTypeContextProvider>
    ) : (
      <Story />
    );
  },
];

export const MOBILE_STORY_CONFIG =
  process.env.VRT === 'true'
    ? // CI で VRT を実行する場合、スクショ撮る時使う viewport を指定
      {
        parameters: {
          screenshot: {
            viewport: 'iPhone X',
          },
        },
      }
    : // local で storybook を立ち上げる場合、`@storybook/addon-viewport` の `defaultViewport` を指定
      {
        parameters: {
          viewport: {
            defaultViewport: 'mobileM',
          },
        },
      };