import { IconSpan } from '@libs/neumorphism-ui/components/IconSpan';
import { InfoTooltip } from '@libs/neumorphism-ui/components/InfoTooltip';
import { ExpandLess, ExpandMore } from '@material-ui/icons';
import big from 'big.js';
import {
  SlippageSelector,
  SlippageSelectorProps,
} from 'components/SlippageSelector';
import { fixHMR } from 'fix-hmr';
import React from 'react';
import { useLocalStorage } from 'usehooks-ts';
import styled from 'styled-components';

export interface DiscloseSlippageSelectorProps extends SlippageSelectorProps {}

function Component({
  className,
  value,
  ...selectorProps
}: DiscloseSlippageSelectorProps) {
  const [{ open }, setOpen] = useLocalStorage<{ open: boolean }>(
    '__anchor_slippage__',
    { open: false },
  );

  return (
    <details className={className} {...(open ? { open: true } : {})}>
      <summary
        onClick={(event) => {
          event.preventDefault();
          setOpen({ open: !open });
        }}
      >
        {open ? <ExpandLess /> : <ExpandMore />}
        <IconSpan>
          Slippage Tolerance{' '}
          <InfoTooltip>
            The transaction will revert if the price changes by more than the
            defined percentage.{' '}
          </InfoTooltip>
          : {big(value).mul(100).toFixed()}%
        </IconSpan>
      </summary>

      <SlippageSelector value={value} {...selectorProps} className="selector" />
    </details>
  );
}

const StyledComponent = styled(Component)`
  summary {
    font-size: 13px;
    line-height: 1.2;

    user-select: none;
    cursor: pointer;

    svg {
      font-size: 1em;
      transform: scale(1.3) translateY(0.1em);
      margin-right: 0.3em;
    }
  }

  summary::marker {
    content: '';
  }

  .selector {
    margin-top: 10px;
  }
`;

export const DiscloseSlippageSelector = fixHMR(StyledComponent);