// @flow
import React from 'react';
import styled from 'styled-components';
import randomstring from 'randomstring';
import type { CheckboxStandaloneProps } from './checkbox-standalone.proptypes';
import { Box } from '../../../primitives';
import {
  getFontFamily,
  getFontWeight,
  getFontSize,
} from '../../../mixins/typography';
import { getPaletteColor } from '../../../mixins/branding';
import { Checkbox } from '../../icon/checkbox';
import {
  getBaseFocusState,
  focusedBoxShadow,
  focusedBorderShadow,
  focusedBorderColor,
  focusedBorderRadius,
} from '../../../mixins/focus';
import { getSpacingRules } from '../../../mixins/spacing';
import { getStackeeRules } from '../../../mixins/stackee';

const ClickableBox = styled(Box)`
  cursor: pointer;
  position: relative;
  ${getBaseFocusState({ hoverTransition: false, activeTransition: false })}
  &:focus-within {
    box-shadow: ${focusedBoxShadow},
      ${focusedBorderShadow} ${focusedBorderColor};
  }
  border-radius: ${focusedBorderRadius};
`;

ClickableBox.displayName = 'ClickableBox';

const CheckboxContainer = styled.div`
  position: absolute;
  left: -10px;
  top: 2px;
`;

const Label = styled.label.attrs(() => ({
  fontSize: 'f1',
}))`
  color: ${({ theme }) =>
    getPaletteColor(theme.defaultTextColor ?? 'greyscale-black')};
  cursor: pointer;
  font-size: ${getFontSize};
  font-family: ${getFontFamily};
  font-weight: ${getFontWeight};
  display: flex;
  align-items: center;
  /* stylelint-disable property-no-vendor-prefix  */
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE, Edge */
  /* stylelint-enable */
  user-select: none; /* Chrome, Opera */
  margin-left: 34px;
  margin-top: 14px;
  margin-bottom: 14px;
  z-index: -1;
`;

const Wrapper = styled.div`
  transform: scale(1);
  &&& {
    ${getSpacingRules};
  }
  ${getStackeeRules};
`;

const InvisibleInput = styled.input`
  height: 0;
  width: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
`;

export const CheckboxStandalone = ({
  selected,
  onClick,
  required,
  label,
  disabled = false,
  spacing,
  className,
  'data-qa': dataQa,
  'data-cy': dataCy,
  id,
  ...stackeeProps
}: CheckboxStandaloneProps) => {
  const randomIdentifier = randomstring.generate({
    length: 7,
    charset: 'alphabetic',
  });

  return (
    <Wrapper
      spacing={spacing}
      {...stackeeProps}
      className={className}
      data-cy={dataCy}
      data-qa={dataQa}
      id={id}
    >
      <ClickableBox
        stacked="row"
        align="center"
        selected={selected}
        onClick={disabled ? undefined : onClick}
      >
        <InvisibleInput
          id={randomIdentifier}
          type="checkbox"
          checked={selected}
          required={required}
          readOnly
          disabled={disabled}
        />
        <Label htmlFor={randomIdentifier}>{label}</Label>
        <CheckboxContainer>
          <Checkbox selected={selected} />
        </CheckboxContainer>
      </ClickableBox>
    </Wrapper>
  );
};

CheckboxStandalone.displayName = 'CheckboxStandalone';
