import React from 'react';
import styled from 'styled-components';
import useTranslationHooks from '../../forms/_resources/hooks/translations';
import {useRouter} from 'next/router';

type TranslateTextKeyProps = {
  textKey: string;
  heading?: boolean;
  query?: boolean;
  label?: boolean;
  title?: boolean;
  progress?: boolean;
  center?: boolean;
  name?: string;
  style?: any;
  formHeading?: boolean;
  formText?: boolean;
};

export const Title = styled.h3`
  margin-bottom: 20px;
  font-size: 18px;
  line-height: 32px;

  ${({theme}) => `
    ${theme.media.mobile} {
      font-size: 24px;
      line-height: 32px;
    }
  `}
`;

const TranslateTextKey: React.FC<TranslateTextKeyProps> = ({
  textKey,
  heading,
  name,
  query,
  label,
  title,
  style,
  formHeading,
  formText,
  center,
}) => {
  const {locale} = useRouter();
  const localeKey = locale ? locale : 'en';
  const {translateKey} = useTranslationHooks(localeKey);
  const translatedText = translateKey(textKey);

  if (heading || query) {
    return <h3 style={style}>{translatedText}</h3>;
  }

  if (formHeading) {
    return <h3 style={{marginRight: 'auto', marginBottom: '20px'}}>{translatedText}</h3>;
  }

  if (formText) {
    return <h3 style={{marginBottom: '40px'}}>{translatedText}</h3>;
  }

  if (title) {
    return <h3 style={style}>{translatedText}</h3>;
  }

  if (label) {
    return (
      <label htmlFor={name} style={style}>
        {translatedText}
      </label>
    );
  }

  if (center) {
    return <h4 style={{...style, textAlign: 'center'}}>{translatedText}</h4>;
  }

  return <h4 style={style}>{translatedText}</h4>;
};

export default TranslateTextKey;