import * as React from 'react';

const TrashAltRegularIcon = props => (
  <svg
    aria-hidden="true"
    focusable="false"
    data-prefix="far"
    data-icon="trash-alt"
    className="svg-inline--fa fa-trash-alt fa-w-14"
    role="img"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 448 512"
    style={props?.style}
  >
    <path
      fill="currentColor"
      d="M268 416h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12zM432 80h-82.41l-34-56.7A48 48 0 0 0 274.41 0H173.59a48 48 0 0 0-41.16 23.3L98.41 80H16A16 16 0 0 0 0 96v16a16 16 0 0 0 16 16h16v336a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128h16a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16zM171.84 50.91A6 6 0 0 1 177 48h94a6 6 0 0 1 5.15 2.91L293.61 80H154.39zM368 464H80V128h288zm-212-48h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12z"
    />
  </svg>
);

const LevelUpAltIcon = props => (
  <svg
    aria-hidden="true"
    focusable="false"
    data-prefix="fas"
    data-icon="level-up-alt"
    className="svg-inline--fa fa-level-up-alt fa-w-10"
    role="img"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 320 512"
    style={props?.style}
  >
    <path
      fill="currentColor"
      d="M313.553 119.669L209.587 7.666c-9.485-10.214-25.676-10.229-35.174 0L70.438 119.669C56.232 134.969 67.062 160 88.025 160H152v272H68.024a11.996 11.996 0 0 0-8.485 3.515l-56 56C-4.021 499.074 1.333 512 12.024 512H208c13.255 0 24-10.745 24-24V160h63.966c20.878 0 31.851-24.969 17.587-40.331z"
    />
  </svg>
);

const CloneIcon = props => (
  <svg
    aria-hidden="true"
    focusable="false"
    data-prefix="far"
    data-icon="clone"
    className="svg-inline--fa fa-clone fa-w-16"
    role="img"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 512 512"
    style={props?.style}
  >
    <path
      fill="currentColor"
      d="M464 0H144c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h320c26.51 0 48-21.49 48-48v-48h48c26.51 0 48-21.49 48-48V48c0-26.51-21.49-48-48-48zM362 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h42v224c0 26.51 21.49 48 48 48h224v42a6 6 0 0 1-6 6zm96-96H150a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h308a6 6 0 0 1 6 6v308a6 6 0 0 1-6 6z"
    />
  </svg>
);

const ArrowsAltSolidIcon = props => (
  <svg
    aria-hidden="true"
    focusable="false"
    data-prefix="fas"
    data-icon="arrows-alt"
    className="svg-inline--fa fa-arrows-alt fa-w-16"
    role="img"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 512 512"
    style={props?.style}
  >
    <path
      fill="currentColor"
      d="M352.201 425.775l-79.196 79.196c-9.373 9.373-24.568 9.373-33.941 0l-79.196-79.196c-15.119-15.119-4.411-40.971 16.971-40.97h51.162L228 284H127.196v51.162c0 21.382-25.851 32.09-40.971 16.971L7.029 272.937c-9.373-9.373-9.373-24.569 0-33.941L86.225 159.8c15.119-15.119 40.971-4.411 40.971 16.971V228H228V127.196h-51.23c-21.382 0-32.09-25.851-16.971-40.971l79.196-79.196c9.373-9.373 24.568-9.373 33.941 0l79.196 79.196c15.119 15.119 4.411 40.971-16.971 40.971h-51.162V228h100.804v-51.162c0-21.382 25.851-32.09 40.97-16.971l79.196 79.196c9.373 9.373 9.373 24.569 0 33.941L425.773 352.2c-15.119 15.119-40.971 4.411-40.97-16.971V284H284v100.804h51.23c21.382 0 32.09 25.851 16.971 40.971z"
    />
  </svg>
);

export const DebugButton: React.FunctionComponent<React.HTMLAttributes<HTMLButtonElement>> = props => {
  return (
    <button
      style={{
        border: 'none',
        background: 'none',
        color: 'inherit',
        padding: '0 0 0 .5em',
        outline: 'none',
        cursor: 'pointer',
      }}
      {...props}
    />
  );
};

export const TrashDebugButton: React.FunctionComponent<React.HTMLAttributes<HTMLButtonElement>> = props => (
  <DebugButton title="Delete" {...props}>
    <TrashAltRegularIcon style={{ widht: '1em', height: '1em' }} />
  </DebugButton>
);

export const LevelUpDebugButton: React.FunctionComponent<React.HTMLAttributes<HTMLButtonElement>> = props => (
  <DebugButton title="Go to parent" {...props}>
    <LevelUpAltIcon style={{ widht: '1em', height: '1em' }} />
  </DebugButton>
);

export const CloneDebugButton: React.FunctionComponent<React.HTMLAttributes<HTMLButtonElement>> = props => (
  <DebugButton title="Clone" {...props}>
    <CloneIcon style={{ widht: '1em', height: '1em' }} />
  </DebugButton>
);

export const MoveDebugButton: React.FunctionComponent<React.HTMLAttributes<HTMLButtonElement>> = props => (
  <DebugButton title="Move" {...props}>
    <ArrowsAltSolidIcon style={{ widht: '1em', height: '1em' }} />
  </DebugButton>
);
