import React, { useContext } from 'react';
import { SchemaForUI } from '@pdfme/common';
import { readFiles } from '../../../../helper';
import { I18nContext } from '../../../../contexts';
import { SidebarProps } from '..';
import closeIcon from '../../../../assets/icons/close.svg';

const shapes = {
  default:
    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAALuAQMAAADL0wGJAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURbzAw+rv8fKruy0AAAPoSURBVHja7dwxbtwwEEBRCkKwRQodYftcYk+ROkcJz5NTsEuZK/AIKlIQAUEnke0VqQ0pA5zxWvFnZcD2s0CNuENxPOZBc0QDDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PD/+P8bkxvnTzzjTG0M2b5rh08rHNT518aPOnTt63+aGTd23edPJ2h//ax+/oO6Gzx6c78+cuPu7x01vmwx5/6uLnO/PjO+b/rGifvtWH3VnT9vmh/e3eqx/bc9d79af2YwEPDw8P/6r8r1GVt5VcUoZPtXxGhp9rGYEM72vbEBne1hJ5Gb6ayIvwqZppi/CxmgqL8KGaTIrwc3WDfATeV/ffIryr7r+PwNvq/vsIfH17D5/qbw/gb/mLKp/OqnycFPj14yqcJPm4vfp5VJ0cP6jyzqjy9rr2q/Dr4qzBp3V5E1wxp/V3rl8LXn32qF6fAY31Psv2NXi/5lQaH+Vuzak0eLsmPRppVPa3FPiU3QiFFDZmD4FCAh6yxV+Bn7O9isLmx2d/TGHr5rI7obDxtFkcKWyb89M2+U1/sX7Kv7Io8gaxFy5l2D/faRk++3x6PgsalV52+fwUW4j/+eGhDPuneyH/otHmp9jyfHHMLM6n4phZnI/FObA4H4qDWnF+Lo46xXlflG+I864o3xDnbVG+Ic6X9RXSfCrrK6T5WBZASPOhrFCQ5ufyjF+a92XdkjTvyrolad6WdUvS/KawSI7/sQn7JfDl+O+bsF8CX44fN2FvHnNnIT4Nm7BfAl+ON5uwXwJfjA/LCuk2BXvCvN0U7InxflmAtxV1gvx0U2N3luPtdZOlwj/FoR5vbuq85Pi48F6LD0scOk3+sq1cleP9ohlNfkpq/N9pGaMuH7T4ZVqGWYt/nBavyxstftblfaVIWJU/y72yODCfzJH5oMvPh+adLm+PzCdzZD5U/61ClT9Lnvyo8e7QvFHlE3ydj0zOu5ucickhcpgcJofJedUVk8j5b/nGgIeHh4d/I3x/RwLlhgfNH3DavSwGXf7YjT76uqCEQ/P37p9z7uKVmwspd17S7hul3PXK6fbsmnvWhO6GZlMnn3ri8gXN5GzHnX0B35ydj91814CHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHl+d/A9cKjmiL040TAAAAAElFTkSuQmCC',
  arrow:
    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAADwCAYAAAA+VemSAAAABmJLR0QA/wD/AP+gvaeTAAAD5UlEQVR4nO3dMWskdRjH8Z+rLF6jKCpiI74FUcRK8BXobbO+CTtfh2xhbyrv4EC0EjtrWzEW4YqtBA/tLnCnxCIbEAt3TWbnmSfz+cA0YQIPhO/+/zM7u0kAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGDulknWSe4lOUvydHec7X623p0DTMwqyTbJxZ5juzsXmIBFkk32h/vvY7P7XaDQdeK9Ok4iYiizyvXjFTEUWiZ5mJsHfJHkqyTPjTs+zNs6w8QrYihwP8MGbDsNIxpq+yxiKHCe4wRsOw0jeJzjBSxiOLJjbaFtp2EEx7iJJWIYydBvI9lOw4iGfJBDxFBgiEcpbaeh0E0+zCBiKLbIZVQihqYWSb7MuBG7JoYBiRiaEzE0J2JoTsTQnIihORFDcyKG5kQMzYkYmhMxNCdiaE7E0JyIoTkRQ3MihuZEDM2JGJoTMTQnYmhOxNCciP+HZ6oHuKZlkrtJPkryTpI30/QPwGQ8SPJJkj+rB7ntVkm2GfcV2jGP4zTNFoJOK/AiyedJPq0ehFvtjySvJ3lSPcghOgW8iXgZx6Mkr1YPcYgu/6ZiFfEynleSfFM9xCE6rMDLJL8keat6EGbntSS/VQ/xXzqswHcjXmqcVA+wT4eAP64egNn6oHqAfToE/G71AMzWneoB9ulwDXye5PnqIZitSTfSYQW+qB4ApqpDwL9WD8BsTX7x6BDwj9UDMFvn1QPs0yHgr6sHYLZ+qB5gn0lfoO94kIMqHuQYwJMkn1UPwex8m4nHmyTPVg9woNMkLyd5r3oQZuFRkrerhzhEl4CT5PskL0XEHNfvSd5I8lf1IIfoFPBFku+S/JTk/SQv1o7DLXR1r6XNt3J0CvjKaZIvkvycy1fJO0leSI/reabrQZIP02Tlhamq+lK7josZTIp4oSnxQlPihabEC02JF5oSLzQlXmhKvNCUeKEp8UJT4oWmxAtNiReaEi80JV5oSrzQlHihKfFCU+KFpsQLTYkXmlokOcm48Z7E1wfDIDYRL7S0inihpWWSh3HNCy2tI15o635sm6GtMbbP4oUjOY9tM7T1OOKFto61hbZthhEc4yaWeGEkQ7+NZNsMIxryQQ7xQoEhHqW0bYZCN/kwg3ih2CLXi3gT8cJkrJJssz/c7e5cYGKWubw7fS/JWZKnu+Ns97P17hwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPiHvwFbv5N273YLjwAAAABJRU5ErkJggg==',
  rect: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAADwCAYAAAA+VemSAAAABmJLR0QA/wD/AP+gvaeTAAAHBElEQVR4nO3dS8htZR3H8a+px7ylNfAu4cgcNCixiOyomF1ooqJgk0YOSkmKCKJBTYPKiTRoJGqlZlkpaITgLYkgCypMHVveII9Y6Tlap8FSEDPOOZ611n4f388H/qMX/s969n5++12XvdYuAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgO3tkE1vwAE4ujq3Ors689U6sTquOqY6fHObxoD2VP+snquerR6tHqserh569W9b3lYP8InVZ6tLqw9XOza7OWwTe6rfVrdXN1dPb3ZzxnN+dWf1crVXqQ3Wy9Ud1c7Ypwubdl82/aYp9Wb1YHVB/I+Tqxvb/Buk1P7UndXpUdUV1a42/6YodSC1q7q8beyd1ffb/Buh1MHU96oj2pBNnYU+pukM30UbGh/mdF91cfX82gNvIsAnVndXH9jA2LCUP1Sfqp5Zc9C1A/yupk8r4eXt6E9Nl5t2rTXgO9YaqOmY986El7ev91c/bcVj4kPXGqjpYP/SFceDTTijek911xqDrRXgy6tvrTQWbNo51ePVn5ceaI1j4FOqR5puOoDtYld1VvXUkoOscQx8bcLL9nN89e2lB1n6P/CF1T0LjwFb1d6m707fv9QASwf4waZ7eGG7eqA6b6nmS+5Cn5/wws7qY0s1XzLAX1mwN4zkq0s1XmoX+oTqr9VhC/WHkbxSndZAT/b4csveAfJS0/3Dl1TvzfOwOHCHNa2dS6ubmtbUkmv2mnWmNY8HWu6F+FHTtWWY06nVLS23bu9dbyoH5+hqd/O/AK9Un19xHmxPVzWttSX2Go9ccR5v2Sdb5hPsC2tOgm3t6pZZw0Pc//71ltlthjXd2vzr+GurzuAtuqF5J/1ijnlZ32nNf2Lr+rk3conrwGfO3O+26m8z94R9eaL6ycw9587GIgE+aeZ+P5u5H+yvn8/cb+5sLBLgY2fu9/DM/WB/zb325s7GIt/E2t28v2G0o+nnLWBtO5rW81x2Nz1aajZLBHjvzP22+g+w8fa2pdfzmg+1A2YmwDAwAYaBCTAMTIBhYAIMAxNgGJgAw8AEGAYmwDAwAYaBCTAMTIBhYAIMAxNgGJgAw8AEGAYmwDAwAYaBCTAMTIBhYAIMAxNgGJgAw8AEGAYmwDAwAYaBCTAMTIBhYAIMAxNgGJgAw8AEGAYmwDAwAYaBCTAMTIBhYAIMAxNgGJgAw8AEGAYmwDAwAYaBCTAMTIBhYAIMAxNgGJgAw8AEGAYmwDAwAYaBCTAMTIBhYAIMAxNgGJgAw8AEGAYmwDAwAYaBCTAMTIBhYAIMAxNgGJgAw8AEGAYmwDAwAYaBCTAMTIBhYAIMAxNgGJgAw8AEGAYmwDAwAYaBCTAMTIBhYAIMAxNgGJgAw8AEGAYmwDAwAYaBCTAMTIBhYAIMAxNgGJgAw8AEGAYmwDAwAYaBCTAMTIBhYAIMAxNgGJgAw8AEGAYmwDAwAYaBLRHgPTP32zFzP9hfc6+93TP3WyTA/5i538kz94P9dcrM/V6Yud8QAT575n6wv86Zud8QAX5y5n6XzNwP9tfFM/d7auZ+i7ih2jtjvVSduuoMoE5vWntzruXr597IJf4DPzZzvyOq787cE/bl2qa1N6e5s7GITzTvp9ZrddWak2Bbu6Zl1vDH15zEW3VU0+nyuSf/SnX1ivNge7qm+nfzr9+XqiNXnMdBub9lPsH2VrdWp603FbaJ06vbWm7d3rveVA7el1ruhXjt0+ym6rLqjHzZgwO3o2ntXF79sPlPWL2xvrjEJA5Zoml1QvVEdfhC/WEkrzTtNT49d+Olvgv9TPXLhXrDaO5qgfDWsjczuPQDk+8s1XjJAN9f/XrB/jCC+6oHl2q+9O2E31i4P2xle6tvLjnA0gG+t7p54TFgq/pB9cCSAyx1Fvr1Tq7+Uh23wliwVTxXndVCJ69es8YTOZ6srlxhHNhKrmzh8FYduvQAr3qkOrH576+Erei6ppshFrfGLvRrjqjuri5YcUxY2z3VZ5r/0VJvas0AVx3bdFr9gyuPC2v4Y7Wzen6tAdd+KuUL1aerP6w8Lizt99VFrRje2sxjZZ9p+pT61QbGhiXc23Ro+MzaA691EuuN9jTduvXu6kMb2gaYw3XV56p/bXpDNuWypmtmS97KpdTc9ffq0qjqpOrG6j9t/o1Ral/146bLorzBeS37NA+lDqbuazp/wz7srO5oOlbe9JumtnftqX5RndsWtPZ14AN1QnVF08PdP9L8j/mEN7O7+k11e3VL9exmN+f/2+oBfr2jqo82/dTKmdX7mgJ+fHVMnovFgdnT9DNAu5q+s/xo9Xj1u+qh6sXNbRoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA++u/b1Ni8u7v12wAAAAASUVORK5CYII=',
  triangle:
    'data:image/png;base64,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',
};

const ExampleInputEditor = (
  props: Pick<SidebarProps, 'changeSchemas'> & { activeSchema: SchemaForUI }
) => {
  const { changeSchemas, activeSchema } = props;
  const i18n = useContext(I18nContext);

  return (
    <div className="PdfMe__ExampleInputEditor">
      <label>{i18n('inputExample')}</label>
      {activeSchema.type === 'image' ? (
        <div>
          {Object.entries(shapes).map(([key, shape]) => (
            <button
              onClick={() =>
                changeSchemas([{ key: 'data', value: shape, schemaId: activeSchema.id }])
              }
              key={key}
            >
              <img style={{ maxHeight: 30 }} src={shape} alt={key} />
            </button>
          ))}
          <div style={{ position: 'relative' }}>
            {activeSchema.data ? (
              <div style={{ margin: '0 auto' }}>
                <button
                  style={{
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    color: '#333',
                    background: '#f2f2f2',
                    cursor: 'pointer',
                    borderRadius: 2,
                    border: '1px solid #767676',
                    height: 20,
                    width: 20,
                  }}
                  aria-label="close"
                  onClick={() =>
                    changeSchemas([{ key: 'data', value: '', schemaId: activeSchema.id }])
                  }
                >
                  <img src={closeIcon} alt="Close icon" width={10} />
                </button>
                <img style={{ maxHeight: 180 }} src={activeSchema.data} alt="Input Example" />
              </div>
            ) : (
              <label>
                <input
                  style={{ color: '#333', background: 'none' }}
                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                    const { files } = e.target;
                    readFiles(files, 'dataURL').then((result) => {
                      changeSchemas([
                        { key: 'data', value: result as string, schemaId: activeSchema.id },
                      ]);
                    });
                  }}
                  type="file"
                  accept="image/jpeg, image/png"
                />
              </label>
            )}
          </div>
        </div>
      ) : (
        <textarea
          rows={6}
          onChange={(e) =>
            changeSchemas([{ key: 'data', value: e.target.value, schemaId: activeSchema.id }])
          }
          style={{
            width: '100%',
            border: '1px solid #767676',
            borderRadius: 2,
            color: '#333',
            background: activeSchema.data ? 'none' : '#ffa19b',
          }}
          value={activeSchema.data}
        />
      )}
    </div>
  );
};

export default ExampleInputEditor;