// TODO: слишком переусложнил компонент изза меняющихся требований, не мешало бы розбить на отдельные компоненты

import React from 'react';
import styled from 'styled-components';
import { Form } from 'react-final-form';

import { useTranslation } from 'next-i18next';
import { Typography } from '../Typography';
import { FormField, FormFieldTypeEnum } from '../FormField';
import { Button } from '../Button';
import { FormFields } from './types';
import { useValidationSchema } from '../../hooks/useValidationSchema';
import { getValidationSchema } from './validation';
import CardIcon from '../../icons/legacy/card-number.svg';
import { IInputProps } from '../Input/types';
import { getIsMoscowRegion } from '../../api/tariffs/helpers';
import { WriteRemoteCheckboxField } from '../WriteRemoteCheckboxField';
import { IRegion } from '../../api/region';

interface IDefaultFields {
    [FormFields.phone]: string;
    [FormFields.email]: string;
}

export type IConfirmOrderModalFormValues<
    WithCard = false,
    WithDepositAmount = false,
    WithWriteRemote = false,
> = IDefaultFields &
    (WithCard extends true
        ? {
              [FormFields.cardNumber]: string;
          }
        : {}) &
    (WithDepositAmount extends true
        ? {
              [FormFields.depositAmount]: string;
          }
        : {}) &
    (WithWriteRemote extends true
        ? {
              [FormFields.writeRemote]: boolean | undefined;
          }
        : {});

type ICommonProps<
    WithCard extends boolean = false,
    WithDepositAmount extends boolean = false,
    WithWriteRemote extends boolean = false,
> = {
    onSubmit: (values: IConfirmOrderModalFormValues<WithCard, WithDepositAmount, WithWriteRemote>) => void;
    withCardNumber?: boolean;
    withDepositAmount?: boolean;
    depositAmountRules?: {
        min: number;
        max: number;
        description: string;
    };
    isLoading?: boolean;
};

type IConfirmPersonalOrderProps<
    WithCard extends boolean = false,
    WithDepositAmount extends boolean = false,
    WithWriteRemote extends boolean = false,
> = WithWriteRemote extends true
    ? { region: IRegion } & ICommonProps<WithCard, WithDepositAmount, WithWriteRemote>
    : { region?: undefined } & ICommonProps<WithCard, WithDepositAmount, WithWriteRemote>;

export const ConfirmPersonalOrder = <
    WithCard extends boolean = false,
    WithDepositAmount extends boolean = false,
    WithWriteRemote extends boolean = false,
>({
    region,
    onSubmit,
    isLoading = false,
    depositAmountRules,
    withDepositAmount = false,
    withCardNumber = false,
}: IConfirmPersonalOrderProps<WithCard, WithDepositAmount, WithWriteRemote>) => {
    const { t } = useTranslation();
    const validation = useValidationSchema(
        getValidationSchema({ withCardNumber, withDepositAmount, depositAmountRules }),
    );

    return (
        <Wrapper>
            <Caption>{t('Укажите контактные данные для оформления заказа и оплаты билета')}</Caption>
            <Form<IConfirmOrderModalFormValues<WithCard, WithDepositAmount, WithWriteRemote>>
                // @ts-ignore
                onSubmit={onSubmit}
                validate={validation}
            >
                {({ handleSubmit, valid }) => (
                    <FormInner onSubmit={handleSubmit}>
                        <FormInputs>
                            {withCardNumber && (
                                <FormField
                                    key="card-input"
                                    name={FormFields.cardNumber}
                                    label={t('Номер карты Тройка')}
                                    icon={<CardIcon />}
                                    placeholder="0000 000 000"
                                    mask="9999 999 999"
                                />
                            )}
                            {withDepositAmount && (
                                <div>
                                    <FormField<IInputProps>
                                        name={FormFields.depositAmount}
                                        label={t('Сумма')}
                                        placeholder="0.00 ₽"
                                        step="0.01"
                                        type="number"
                                    />
                                    {depositAmountRules?.description && (
                                        <FieldCaption>{depositAmountRules.description}</FieldCaption>
                                    )}
                                </div>
                            )}
                            <FormField
                                fieldType={FormFieldTypeEnum.phone}
                                name={FormFields.phone}
                                label={t('Номер телефона')}
                                placeholder="+7 ___ ___ __ __"
                            />
                            <FormField
                                name={FormFields.email}
                                label={t('E-mail')}
                                placeholder={t('Укажите e-mail')}
                                type="email"
                            />
                            {region && getIsMoscowRegion(region) && (
                                <WriteRemoteCheckboxField name={FormFields.writeRemote} />
                            )}
                        </FormInputs>
                        <SmallText>
                            {t('Оплачивая заказ, вы соглашаетесь с')}{' '}
                            <a href="/user-agreement" target="_blank">
                                {t('условиями сервиса')}
                            </a>{' '}
                            {t('и')}{' '}
                            <a href="/user-agreement" target="_blank">
                                {t('политикой обработки персональных данных')}
                            </a>
                            {t('. После оплаты заказа, не забудьте записать билет на вашу Тройку.')}
                        </SmallText>
                        <SubmitButton disabled={!valid || isLoading} htmlType="submit">
                            {t('Перейти к оплате')}
                        </SubmitButton>
                    </FormInner>
                )}
            </Form>
        </Wrapper>
    );
};

const Wrapper = styled.div`
    display: flex;
    flex-direction: column;
    flex: 1;
`;

const Caption = styled(Typography).attrs({ variant: 'regular16' })`
    color: ${({ theme }) => theme.colors.black()};
    margin-bottom: 24px;
`;

const SmallText = styled(Typography).attrs({ variant: 'regular12' })`
    color: ${({ theme }) => theme.colors.black()};
    margin-top: 24px;
    margin-bottom: 10px;

    a {
        text-decoration: underline;
    }
`;

const FormInner = styled.form`
    display: flex;
    flex-direction: column;
    flex: 1;
`;

const FormInputs = styled.div`
    display: grid;
    grid-auto-flow: row;
    grid-gap: 24px;
`;

const SubmitButton = styled(Button)`
    margin: 36px auto 0;

    @media ${({ theme }) => theme.breakpoints.sm} {
        width: 100%;
        margin-top: auto;
    }
`;

const FieldCaption = styled(Typography).attrs({ variant: 'regular12', color: 'gray' })`
    margin-top: 8px;
    margin-left: 4px;
`;