/** @jsxRuntime classic */
/** @jsx jsx */
import React, { useState } from 'react';
import { css, jsx, useTheme } from '@emotion/react';
import { getIcon } from '../../icons';
import { IColors } from '../../types/theme';
import { Toggle } from '../Toggle';
import { Checkbox } from '../Checkbox';

export interface IconsProps {}

const arr = [
  'remove',
  'minus',
  'profile_filled',
  'trash',
  'dollar',
  'info',
  'arrow_down',
  'edit_outline',
  'credit_card',
  'view',
  'more',
  'search',
  'arrow_up',
  'note_filled',
  'conflict',
  'close',
  'whistle',
  'whitecheck',
  'arrow_left',
  'mountain',
  'back',
  'forward',
  'calendar',
  'court',
  'backpack',
  'activity',
  'location',
  'tag',
  'profiles',
  'tickets',
  'cash',
  'reports',
  'clock',
  'settings_outline',
  'bell',
  'collapse',
  'support',
  'plus',
  'right-action',
  'ellipse_mid',
  'excel',
  'squareAndPlus',
  'boxed_card',
  'sport_tennis',
  'sport_vollyball',
  'filters',
  'expand_all',
  'vertical',
  'horizontal',
  'list',
];

const iconCss = (colors: IColors) => css`
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e3e3e3;
  font-family: Montserrat;
  font-size: 10px;
  width: 75px;
  height: 75px;
  margin: 0.5rem;
  flex-direction: column;
  border-radius: 5px;
  justify-content: flex-end;
  position: relative;
  &:hover {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
  }
  svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  svg,
  label {
    text-align: center;
    color: ${colors.tx_text_secondary};
  }
`;

const container = css`
  display: flex;
  flex-wrap: wrap;
  border-radius: 5px;
  margin-top: 5px;
`;

export const IconsContainer = () => {
  const colors = useTheme();
  const [chosenIcon, setChosenIcon] = useState('');
  const [isLeft, setLeft] = useState(false);
  const [isPadding, setPadding] = useState(false);

  const handleClick = (icon) => {
    setChosenIcon(icon);
    // var textArea = document.createElement('textarea');
    // textArea.value = `getIcon('${icon}')`;
    // textArea.style.display = 'hidden';
    // document.body.appendChild(textArea);
    // textArea.focus();
    // textArea.select();
    // var successful = document.execCommand('copy');
    // document.body.removeChild(textArea);
  };
  return (
    <>
      <pre
        style={{
          background: '#f3f3f3',
          padding: '.5rem',
        }}
      >
        {`import {getIcon} from 'bondsports-utils' `}
        {chosenIcon && (
          <>
            <br />
            <br />
            <br />
          </>
        )}
        {chosenIcon
          ? `const App = () => (
    <div>
        ${
          "{getIcon('" +
          chosenIcon +
          (isPadding ? (isLeft ? "','l" : "','r") : '') +
          "')]"
        }
    </div>
)`
          : ''}
      </pre>
      {chosenIcon && (
        <>
          <Checkbox
            checked={isPadding}
            setChecked={setPadding}
            sizer="S"
            label="with padding"
          />
          {isPadding && (
            <div style={{ marginTop: '1rem' }}>
              <Toggle
                isPressed={isLeft}
                setPressed={setLeft}
                label="left padding"
                secondLabel="right padding"
              />
            </div>
          )}
        </>
      )}
      <div css={container}>
        {arr.sort().map((icon, index) => {
          return (
            <div
              onClick={() => handleClick(icon)}
              css={iconCss(colors)}
              key={index}
            >
              {getIcon(icon)}
              <label>{icon}</label>
            </div>
          );
        })}
      </div>
    </>
  );
};