import { IconButton, Button, styled, useTheme, Link } from '@mui/material';
import { OpenInNew } from '@mui/icons-material';

import { TranslationFields } from './TranslationFields';
import { LanguageSelect } from './LanguageSelect';
import { LoadingButton } from '../common/LoadingButton';
import { ScreenshotGallery } from './ScreenshotGallery/ScreenshotGallery';
import { ScFieldTitle } from '../common/FieldTitle';
import { useDialogContext, useDialogActions } from './dialogContext';
import { NsSelect } from './NsSelect';
import { TOLGEE_RESTRICT_ATTRIBUTE } from '../../constants';
import { Tags } from './Tags/Tags';
import { PluralFormCheckbox } from './PluralFormCheckbox';
import { ErrorAlert } from './ErrorAlert';
import { HttpError } from '../client/HttpError';
import { Tooltip } from '../common/Tooltip';

const ScContainer = styled('div')`
  font-family: Rubik, Roboto, Arial;
  padding: 70px 40px 20px;

  box-sizing: border-box;
  max-width: 100%;
  width: 700px;
  background: white;
  display: flex;
  flex-direction: column;
`;

const ScHeading = styled('div')`
  display: flex;
  align-items: center;
  gap: 5px;
`;

const ScHeadingTitle = styled('div')`
  display: flex;
  margin: 0px;
  color: #141414;
  font-weight: 900;
  font-size: 24px;
`;

const ScHeadingRight = styled('div')`
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-grow: 1;
`;

const ScKey = styled('p')`
  margin: 0px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.65);
`;

const ScKeyHint = styled('span')`
  color: rgba(0, 0, 0, 0.35);
`;

const ScFieldsWrapper = styled('div')`
  margin-top: 20px;
`;

const ScTagsWrapper = styled('div')`
  margin-top: 5px;
`;

const ScGalleryWrapper = styled('div')`
  margin-top: 10px;
`;

const ScControls = styled('div')`
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  min-height: 36px;
`;

const ScKeyTitle = styled(ScFieldTitle)`
  justify-content: start;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.65);
  gap: 4px;
  align-items: center;
`;

const ScLinkIcon = styled(Link)`
  display: grid;
  font-size: 16px;
  margin: 0px 0px;
`;

export const KeyForm = () => {
  const theme = useTheme();
  const { setUseBrowserWindow, onClose, onSave, setSelectedNs } =
    useDialogActions();

  const pluralsSupported = useDialogContext((c) => c.pluralsSupported);
  const linkToPlatform = useDialogContext((c) => c.linkToPlatform);
  const useBrowserWindow = useDialogContext((c) => c.useBrowserWindow);
  const input = useDialogContext((c) => c.input);
  const keyData = useDialogContext((c) => c.keyData);
  const formDisabled = useDialogContext((c) => c.formDisabled);
  const loading = useDialogContext((c) => c.loading);
  const error = useDialogContext((c) => c.error);
  const submitError = useDialogContext((c) => c.submitError);
  const saving = useDialogContext((c) => c.saving);
  const success = useDialogContext((c) => c.success);
  const keyExists = useDialogContext((c) => c.keyExists);
  const fallbackNamespaces = useDialogContext((c) => c.fallbackNamespaces);
  const selectedNs = useDialogContext((c) => c.selectedNs);
  const permissions = useDialogContext((c) => c.permissions);

  const screenshotsView = permissions.canViewScreenshots;
  const viewPluralCheckbox = permissions.canEditPlural && pluralsSupported;
  const ready = !loading && !error;

  const generalError = error || submitError;

  return (
    <ScContainer {...{ [TOLGEE_RESTRICT_ATTRIBUTE]: 'true' }}>
      <IconButton
        sx={{ position: 'absolute', top: '18px', right: '18px' }}
        onClick={onClose}
      >
        <svg
          width="16"
          height="17"
          viewBox="0 0 16 17"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M9.40994 8.49994L15.7099 2.20994C15.8982 2.02164 16.004 1.76624 16.004 1.49994C16.004 1.23364 15.8982 0.978245 15.7099 0.789941C15.5216 0.601638 15.2662 0.49585 14.9999 0.49585C14.7336 0.49585 14.4782 0.601638 14.2899 0.789941L7.99994 7.08994L1.70994 0.789941C1.52164 0.601638 1.26624 0.49585 0.999939 0.49585C0.733637 0.49585 0.478243 0.601638 0.289939 0.789941C0.101635 0.978245 -0.00415253 1.23364 -0.00415254 1.49994C-0.00415254 1.76624 0.101635 2.02164 0.289939 2.20994L6.58994 8.49994L0.289939 14.7899C0.196211 14.8829 0.121816 14.9935 0.0710478 15.1154C0.0202791 15.2372 -0.00585938 15.3679 -0.00585938 15.4999C-0.00585938 15.632 0.0202791 15.7627 0.0710478 15.8845C0.121816 16.0064 0.196211 16.117 0.289939 16.2099C0.382902 16.3037 0.493503 16.3781 0.615362 16.4288C0.737221 16.4796 0.867927 16.5057 0.999939 16.5057C1.13195 16.5057 1.26266 16.4796 1.38452 16.4288C1.50638 16.3781 1.61698 16.3037 1.70994 16.2099L7.99994 9.90994L14.2899 16.2099C14.3829 16.3037 14.4935 16.3781 14.6154 16.4288C14.7372 16.4796 14.8679 16.5057 14.9999 16.5057C15.132 16.5057 15.2627 16.4796 15.3845 16.4288C15.5064 16.3781 15.617 16.3037 15.7099 16.2099C15.8037 16.117 15.8781 16.0064 15.9288 15.8845C15.9796 15.7627 16.0057 15.632 16.0057 15.4999C16.0057 15.3679 15.9796 15.2372 15.9288 15.1154C15.8781 14.9935 15.8037 14.8829 15.7099 14.7899L9.40994 8.49994Z"
            fill="#8F005D"
          />
        </svg>
      </IconButton>
      <ScHeading>
        <ScHeadingTitle>Quick translation</ScHeadingTitle>

        <ScHeadingRight>{!loading && <LanguageSelect />}</ScHeadingRight>
      </ScHeading>
      <ScKeyTitle>Key</ScKeyTitle>
      <ScKey>
        {input}
        <ScKeyHint>
          {!keyExists && ready && " (key doesn't exist yet)"}
        </ScKeyHint>
      </ScKey>
      <NsSelect
        options={fallbackNamespaces}
        value={selectedNs}
        onChange={setSelectedNs}
      />
      {ready && (
        <ScTagsWrapper>
          <ScFieldTitle>Tags</ScFieldTitle>
          <Tags />
        </ScTagsWrapper>
      )}
      {/* {ready && viewPluralCheckbox && <PluralFormCheckbox />} */}
      {!error && (
        <ScFieldsWrapper>
          <TranslationFields />
        </ScFieldsWrapper>
      )}
      {/* {screenshotsView && ready && (
        <ScGalleryWrapper>
          <ScreenshotGallery />
        </ScGalleryWrapper>
      )} */}
      {formDisabled && ready && (
        <ErrorAlert
          error={new HttpError('permissions_not_sufficient_to_edit')}
          severity="info"
        />
      )}
      {generalError && <ErrorAlert error={generalError} />}
      <ScControls>
        <Button
          onClick={onClose}
          color="primary"
          variant="outlined"
          sx={{
            textTransform: 'none',
            fontWeight: '900',
            fontSize: '16px',
            padding: '8px 25px',
            borderRadius: '24px',
          }}
        >
          {useBrowserWindow ? 'Close' : 'Cancel'}
        </Button>
        <LoadingButton
          loading={saving}
          disabled={saving || formDisabled}
          onClick={onSave}
          color="primary"
          sx={{
            textTransform: 'none',
            fontWeight: '900',
            fontSize: '16px',
            padding: '8px 25px',
            borderRadius: '24px',
          }}
          variant="contained"
          style={{ marginLeft: '10px' }}
        >
          {success
            ? 'Saved! ✓'
            : keyData?.keyId === undefined
              ? 'Create'
              : 'Update'}
        </LoadingButton>
      </ScControls>
    </ScContainer>
  );
};