const { createRoot } = ReactDOM;
const { LinkOutlined, SnippetsOutlined, CheckOutlined } = icons;
const { Typography, Avatar, List, Radio, Space } = antd;
const { Paragraph, Text } = Typography;

const data = [
  {
    title: 'ページトップへ戻るボタンの作り方【JavaScript】',
    postUrl: "https://sinpe-pgm.com/pagetop-button-js/",
    description: "JavaScriptで作るにはどうしたらいいんだろう？"
  },
  {
    title: '【コピペOK】複数のモーダルを同じクラス名で設置する方法',
    postUrl: "https://sinpe-pgm.com/multiple-modals/",
    description: "複数のモーダルを実装するの難しい。これまで2~3個だったから#modal01、#modal02とかしていたけど、今回10個以上あるから全部にid割り振ってられないよ、、"
  },
  {
    title: 'OpenAIとNext.jsでAIチャットボットを30分で作る方法',
    postUrl: "https://sinpe-pgm.com/openaiapi_nextjs_firststep/",
    description: "ChatGPTのAPIで何ができるの？"
  },
  {
    title: 'IntersectionObserverを使うときのテンプレート',
    postUrl: "https://sinpe-pgm.com/intersectionobserver_text-illate/",
    description: "スクロールして見出しが表示されると、文字がランダムに表示されるようにしています。今回はTextillateというライブラリを使用していますが、独自でCSSを書いてでふわっと表示させたり色々応用できると思います。"
  },
  {
    title: 'remodal.jsがブラウザバックで再表示されるときは、hashTracking: false,にします【使い方・オプション】',
    postUrl: "https://sinpe-pgm.com/fixed_remodal/",
    description: "ブラウザの戻るボタン押すとモーダル開くのなおしたい。"
  },
  {
    title: '【React】オプショナルチェイニング派？AND演算子派？',
    postUrl: "https://sinpe-pgm.com/chain_or_and/",
    description: "Reactで同じような処理をオプショナルチェーンで記述しているものと、AND演算子で記述しているものがありました。どちらが良いのでしょうか？"
  },
  {
    title: '静的なHTMLでReactを使う｜BabelによるJSXのコンパイル',
    postUrl: "https://sinpe-pgm.com/react_html/",
    description: "静的なHTMLでReactを使用してみます。"
  },
  {
    title: '【JavaScript】プログレスバー｜シンプルなデザイン',
    postUrl: "https://sinpe-pgm.com/js_progressbar/",
    description: "プログレスバーを実装するのに、ProgressBar.jsを使ったけど、Barが角丸にできなかったり使い勝手わるいなぁ。シンプルなデザインだし自分で作れないかな？"
  },
  {
    title: '【入門】Reactとは？コンポーネントベースの映画リスト作成をわかりやすく解説',
    postUrl: "https://sinpe-pgm.com/react_movie_component/",
    description: "映画情報のリストを作成したので、その情報を画面に表示させてみましょう。"
  },
  {
    title: 'Next.js × Notionを活用したブログ構築のステップバイステップガイド',
    postUrl: "https://sinpe-pgm.com/notionblog_nextjs/",
    description: "Next.js、Notionを使ってブログを構築して行きたいと思います。"
  },
  {
    title: 'Reactの基礎を学ぼう: コンポーネントとデータ表示の手法を解説',
    postUrl: "https://sinpe-pgm.com/react-component-data-display-explained/",
    description: "Reactの基礎的な書き方を学びたいです。"
  },
  {
    title: 'CodePenでReactを使用する方法',
    postUrl: "https://sinpe-pgm.com/react-codepen/",
    description: "Reactハンズオンラーニング"
  },
  {
    title: '【コピペOK】FAQなどにある、アコーディオンのサンプル(jQuery)矢印やアイコンもつけれます',
    postUrl: "https://sinpe-pgm.com/jquery-faq-accordion/",
    description: "よくあるアコーディオンを作成したいけど、使い回しやすい良いサンプルないかな？"
  },
  {
    title: '【コピペOK】自動でPDFのアイコンをつけるCSS（Excelファイルや、Wordファイルも）',
    postUrl: "https://sinpe-pgm.com/file-icon/",
    description: "PDFとかExcelファイルある時に自動でアイコン付けれないかな？"
  },
  {
    title: 'Day.jsで日付のフォーマットを整える｜React Next.js microCMS',
    postUrl: "https://sinpe-pgm.com/react-dayjs/",
    description: "日付が2023-01-29T00:30:00.000Zこんな感じなんだけど、見やすく整えれないかな。"
  },
  {
    title: 'HTMLで角丸のテーブルを作る｜overflow-hidden以外の方法',
    postUrl: "https://sinpe-pgm.com/table-border-radius/",
    description: "角丸テーブルはoverflow-hiddenで実装してたけど、今回のテーブルはoverflow-hiddenできないんだよね。"
  },
];

const firstItem = data[0];
const url = firstItem.postUrl;
const name = firstItem.title;
const encodedUrl = encodeURI(url);

const handleCopyToClipboard = async (richText) => {
  const blob = new Blob([richText], { type: 'text/html' });
  const blobPlain = new Blob([richText], { type: 'text/plain' });

  const item = [new ClipboardItem({ 'text/html': blob, 'text/plain': blobPlain })];

  try {
    await navigator.clipboard.write(item);
    message.success('コピーされました');
  } catch (error) {
    console.error('Error copying rich text to clipboard:', error);
  }
};

const App = () => {
  const handleCopyToClipboardRichText = (postUrl, title) => {
    const richText = `<a href="${postUrl}" target="_blank">${title}</a>`;
    handleCopyToClipboard(richText);
  };

  const renderItem = (item, index) => (
    <List.Item>
      <List.Item.Meta
        avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}
        title={<a target="_blank" href={item.postUrl}>{item.title}</a>}
        description={item.description}
      />
      <div className="icon-wrap">
        <Paragraph
          className="icon"
          copyable={{
            text: item.postUrl,
            icon: [<LinkOutlined key="copy-icon" />, <CheckOutlined key="copied-icon" />],
            tooltips: ['テキスト', 'clicked!!'],
          }}
        ></Paragraph>
        <Paragraph
          className="icon"
          copyable={{
            icon: [<SnippetsOutlined key="copy-icon" />, <CheckOutlined key="copied-icon" />],
            tooltips: ['リッチテキスト', 'clicked!!'],
            onCopy: () => {
              handleCopyToClipboardRichText(item.postUrl, item.title);
            },
          }}
        ></Paragraph>
      </div>
    </List.Item>
  );

  return (
    <>
      <Typography.Title level={2}>リッチテキストをクリップボードにコピーするサンプル</Typography.Title>
      <Space
        direction="vertical"
        style={{
          marginBottom: '20px',
        }}
        size="middle"
      >
      </Space>
      <List
        pagination={{
          defaultPageSize: 5
        }}
        dataSource={data}
        renderItem={renderItem}
      />
    </>
  );
};

const ComponentDemo = App;

createRoot(mountNode).render(<ComponentDemo />);