import React from 'react';
import { RESTRICTED_ASCENDANT_ATTRIBUTE } from '@tolgee/core';
import { styled } from '@mui/material/styles';
import IconButton from '@mui/material/IconButton';
import Button from '@mui/material/Button';
import OpenInNew from '@mui/icons-material/OpenInNew';
import { TextHelper } from '@tolgee/core';

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,
  useDialogDispatch,
} from './TranslationDialogContextProvider';

const ScContainer = styled('div')`
  font-family: Rubik, Roboto, Arial;
  padding: 20px;
  box-sizing: border-box;
  max-width: 100%;
  width: 700px;
  display: flex;
  flex-direction: column;
`;

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

const ScHeadingTitle = styled('div')`
  display: flex;
  margin: 0px;
  font-size: 19px;
`;

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

const ScKey = styled('p')`
  margin: 0px;
`;

const ScKeyHint = styled('span')`
  color: grey;
`;

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

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

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

const ScRestriction = styled('div')`
  margin-top: 8px;
  color: ${({ theme }) => theme.palette.text.secondary};
`;

const ScError = styled('div')`
  color: red;
`;

export const KeyForm = () => {
  const dispatch = useDialogDispatch();

  const linkToPlatform = useDialogContext((c) => c.linkToPlatform);
  const useBrowserWindow = useDialogContext((c) => c.useBrowserWindow);
  const dependencies = useDialogContext((c) => c.dependencies);
  const input = useDialogContext((c) => c.input);
  const translations = useDialogContext((c) => c.translations);
  const formDisabled = useDialogContext((c) => c.formDisabled);
  const loading = useDialogContext((c) => c.loading);
  const error = useDialogContext((c) => c.error);
  const saving = useDialogContext((c) => c.saving);
  const success = useDialogContext((c) => c.success);

  const screenshotsView =
    dependencies.coreService.isAuthorizedTo('screenshots.view');

  const setUseBrowserWindow = (value: boolean) => {
    dispatch({ type: 'SET_USE_BROWSER_WINDOW', payload: value });
  };

  const onClose = () => {
    dispatch({ type: 'ON_CLOSE' });
  };

  const onSave = () => {
    dispatch({ type: 'ON_SAVE' });
  };

  return (
    <ScContainer {...{ [RESTRICTED_ASCENDANT_ATTRIBUTE]: 'true' }}>
      <ScHeading>
        <a
          href={linkToPlatform}
          target="_blank"
          rel="noreferrer noopener"
          id="_tolgee_platform_link"
        >
          <svg
            viewBox="0 0 200 200"
            xmlns="http://www.w3.org/2000/svg"
            opacity="0.99"
            fill="#822B55"
            style={{
              fillRule: 'evenodd',
              clipRule: 'evenodd',
              strokeLinejoin: 'round',
              strokeMiterlimit: 2,
              height: 23,
            }}
          >
            <path d="M97.16,7.27a16.94,16.94,0,0,0-1.9,24.47,16.36,16.36,0,0,0,5,3.83,3.23,3.23,0,0,1-2.9,5.77,23.14,23.14,0,0,1-11.41-13C73.83,31.1,63.46,37.09,52.82,46.51c-27.44,24.3-34.35,61.74-16.38,85.26-4.57,5.79-8,12.22-8.9,18.69a20.88,20.88,0,0,0,5.62,18c9.18,9.61,21.42,7.13,31.26,5.14,6.58-1.34,12.8-2.6,16.5-.23,3.22,2.07,3.47,3.87,3.61,4.45,2.1,9.32-5.79,13.89-7.67,16.27a1.48,1.48,0,0,0,1.13,2.4c3.48,0,9-1.18,12.34-4.08s7.16-7.9,5.89-16.32c-.08-.5-.18-1-.32-1.58-.86-3.35-3.1-7.57-8.61-11.09-7.72-4.95-17-3.07-25.22-1.41-9.76,2-16,2.85-20.37-1.71a9.13,9.13,0,0,1-2.46-8.19c.54-3.77,2.65-7.89,5.62-11.86,21.71,16.89,56.87,13.47,82.67-9.39a75.34,75.34,0,0,0,20.81-28.09A23.14,23.14,0,0,1,134.8,89a3.23,3.23,0,0,1,6.08-2.19,16.37,16.37,0,0,0,3.2,5.39,16.85,16.85,0,1,0,11.48-28,3.23,3.23,0,0,1-.51-6.44,23.41,23.41,0,0,1,12.88,2.69c2.6-14.08,3.34-31.41-2.06-37.51-4.08-4.61-20.62-8-35.18-7.76A23.48,23.48,0,0,1,130.8,25a3.23,3.23,0,0,1-6.33-1.28A16.94,16.94,0,0,0,97.16,7.27Zm63.25,21a5.29,5.29,0,0,1-.57,6.19c-1.29,1.14-2.72-.51-4.1-2.06s-3.1-3.42-1.81-4.56A5.74,5.74,0,0,1,160.41,28.27Z"></path>
          </svg>
        </a>

        <ScHeadingTitle>Quick translation</ScHeadingTitle>

        {!useBrowserWindow && (
          <IconButton
            title="Open in new window"
            onClick={() => setUseBrowserWindow(true)}
            color="inherit"
            size="small"
          >
            <OpenInNew fontSize="small" />
          </IconButton>
        )}

        <ScHeadingRight>
          <LanguageSelect />
        </ScHeadingRight>
      </ScHeading>

      <ScFieldTitle>Key</ScFieldTitle>
      <ScKey>
        {input && TextHelper.removeEscapes(input)}
        <ScKeyHint>
          {translations?.keyId === undefined && " (key doesn't exist yet)"}
        </ScKeyHint>
      </ScKey>

      <ScFieldsWrapper>
        <TranslationFields />
      </ScFieldsWrapper>

      {screenshotsView && (
        <ScGalleryWrapper>
          <ScreenshotGallery />
        </ScGalleryWrapper>
      )}

      {formDisabled && !loading && (
        <ScRestriction>{`Modification is restricted due to missing ${
          translations?.keyId !== undefined ? 'translations.edit' : 'keys.edit'
        } scope in current api key settings.`}</ScRestriction>
      )}

      {error && <ScError>{error}</ScError>}
      <ScControls>
        <Button onClick={onClose} color="secondary">
          {useBrowserWindow ? 'Close' : 'Cancel'}
        </Button>
        <LoadingButton
          loading={saving}
          disabled={saving || formDisabled}
          onClick={onSave}
          color="primary"
          variant="contained"
          style={{ marginLeft: '10px' }}
        >
          {success
            ? 'Saved! ✓'
            : translations?.keyId === undefined
            ? 'Create'
            : 'Update'}
        </LoadingButton>
      </ScControls>
    </ScContainer>
  );
};