import { makeStyles, Box } from '@material-ui/core'
import classnames from 'classnames'
import { Field, useFormikContext } from 'formik'
import * as R from 'ramda'
import React, { memo } from 'react'
import * as Yup from 'yup'

import { NumberInput, RadioGroup } from 'src/components/inputs/formik'
import { H4, Label2, Label1, Info1, Info2 } from 'src/components/typography'
import { errorColor } from 'src/styling/variables'
import { transformNumber } from 'src/utils/number'
// import { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg'
// import { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg'

const useStyles = makeStyles({
  radioLabel: {
    height: 40,
    padding: [[0, 10]]
  },
  radio: {
    padding: 4,
    margin: 4
  },
  radioGroup: {
    flexDirection: 'row'
  },
  error: {
    color: errorColor
  },
  specialLabel: {
    height: 40,
    padding: 0
  },
  specialGrid: {
    display: 'grid',
    gridTemplateColumns: [[182, 162, 141]]
  },
  directionIcon: {
    marginRight: 2
  },
  directionName: {
    marginLeft: 6
  },
  thresholdWrapper: {
    display: 'flex',
    flexDirection: 'column'
  },
  thresholdTitle: {
    marginTop: 50
  },
  thresholdContentWrapper: {
    display: 'flex',
    flexDirection: 'row'
  },
  thresholdField: {
    marginRight: 6,
    width: 75
  },
  description: {
    marginTop: 7
  },
  space: {
    marginLeft: 6,
    marginRight: 6
  },
  lastSpace: {
    marginLeft: 6
  },
  suspensionDays: {
    width: 34
  },
  input: {
    marginTop: -2
  },
  limitedInput: {
    width: 50
  },
  daysInput: {
    width: 60
  }
})

// const direction = Yup.string().required()

const triggerType = Yup.string().required()
const threshold = Yup.object().shape({
  threshold: Yup.number()
    .nullable()
    .transform(transformNumber)
    .label('Invalid threshold'),
  thresholdDays: Yup.number()
    .transform(transformNumber)
    .nullable()
    .label('Invalid threshold days')
})

const requirement = Yup.object().shape({
  requirement: Yup.string().required(),
  suspensionDays: Yup.number()
    .transform(transformNumber)
    .nullable()
})

const Schema = Yup.object()
  .shape({
    triggerType,
    requirement,
    threshold
    // direction
  })
  .test(({ threshold, triggerType }, context) => {
    const errorMessages = {
      txAmount: threshold => 'Amount must be non negative',
      txVolume: threshold => {
        const thresholdMessage = 'Volume must be non negative'
        const thresholdDaysMessage = 'Days must be positive'
        let message = ''
        if (threshold.threshold < 0) message = message.concat(thresholdMessage)
        if (threshold.thresholdDays <= 0)
          message = message
            ? message.concat(', ' + thresholdDaysMessage)
            : message.concat(thresholdDaysMessage)
        console.log(message)
        return message
      },
      txVelocity: threshold => {
        const thresholdMessage = 'Transactions must be non negative'
        const thresholdDaysMessage = 'Days must be positive'
        let message = ''
        if (threshold.threshold <= 0) message = message.concat(thresholdMessage)
        if (threshold.thresholdDays <= 0)
          message = message
            ? message.concat(', ' + thresholdDaysMessage)
            : message.concat(thresholdDaysMessage)
        console.log(message)
        return message
      },
      consecutiveDays: threshold => 'Days must be non negative'
    }
    const thresholdValidator = {
      txAmount: threshold => threshold.threshold >= 0,
      txVolume: threshold =>
        threshold.threshold >= 0 && threshold.thresholdDays > 0,
      txVelocity: threshold =>
        threshold.threshold > 0 && threshold.thresholdDays > 0,
      consecutiveDays: threshold => threshold.thresholdDays > 0
    }

    return (
      (triggerType && thresholdValidator?.[triggerType](threshold)) ||
      context.createError({
        path: 'threshold',
        message: errorMessages?.[triggerType](threshold)
      })
    )
  })
  .test(({ requirement }, context) => {
    const requirementValidator = requirement =>
      requirement.requirement === 'suspend'
        ? requirement.suspensionDays > 0
        : true

    return (
      (requirement && requirementValidator(requirement)) ||
      context.createError({
        path: 'requirement',
        message: 'Suspension days must be positive'
      })
    )
  })

// Direction V2 only
// const directionSchema = Yup.object().shape({ direction })

// const directionOptions = [
//   {
//     display: 'Both',
//     code: 'both'
//   },
//   {
//     display: 'Only cash-in',
//     code: 'cashIn'
//   },
//   {
//     display: 'Only cash-out',
//     code: 'cashOut'
//   }
// ]

// const directionOptions2 = [
//   {
//     display: (
//       <>
//         <TxInIcon /> in
//       </>
//     ),
//     code: 'cashIn'
//   },
//   {
//     display: (
//       <>
//         <TxOutIcon /> out
//       </>
//     ),
//     code: 'cashOut'
//   },
//   {
//     display: (
//       <>
//         <Box display="flex">
//           <Box mr={0.25}>
//             <TxOutIcon />
//           </Box>
//           <Box>
//             <TxInIcon />
//           </Box>
//         </Box>
//       </>
//     ),
//     code: 'both'
//   }
// ]

// const Direction = () => {
//   const classes = useStyles()
//   const { errors } = useFormikContext()

//   const titleClass = {
//     [classes.error]: errors.direction
//   }

//   return (
//     <>
//       <Box display="flex" alignItems="center">
//         <H4 className={classnames(titleClass)}>
//           In which type of transactions will it trigger?
//         </H4>
//       </Box>
//       <Field
//         component={RadioGroup}
//         name="direction"
//         options={directionOptions}
//         labelClassName={classes.radioLabel}
//         radioClassName={classes.radio}
//         className={classes.radioGroup}
//       />
//     </>
//   )
// }

// const txDirection = {
//   schema: directionSchema,
//   options: directionOptions,
//   Component: Direction,
//   initialValues: { direction: '' }
// }

// TYPE
const typeSchema = Yup.object()
  .shape({
    triggerType: Yup.string().required(),
    threshold: Yup.object({
      threshold: Yup.number()
        .transform(transformNumber)
        .nullable(),
      thresholdDays: Yup.number()
        .transform(transformNumber)
        .nullable()
    })
  })
  .test(
    'are-fields-set',
    'All fields must be set.',
    ({ triggerType, threshold }, context) => {
      const validator = {
        txAmount: threshold => threshold.threshold >= 0,
        txVolume: threshold =>
          threshold.threshold >= 0 && threshold.thresholdDays > 0,
        txVelocity: threshold =>
          threshold.threshold > 0 && threshold.thresholdDays > 0,
        consecutiveDays: threshold => threshold.thresholdDays > 0
      }

      return (
        (triggerType && validator?.[triggerType](threshold)) ||
        context.createError({ path: 'threshold' })
      )
    }
  )

const typeOptions = [
  { display: 'Transaction amount', code: 'txAmount' },
  { display: 'Transaction volume', code: 'txVolume' },
  { display: 'Transaction velocity', code: 'txVelocity' },
  { display: 'Consecutive days', code: 'consecutiveDays' }
]

const Type = ({ ...props }) => {
  const classes = useStyles()
  const { errors, touched, values } = useFormikContext()

  const typeClass = {
    [classes.error]: errors.triggerType && touched.triggerType
  }

  const containsType = R.contains(values?.triggerType)
  const isThresholdCurrencyEnabled = containsType(['txAmount', 'txVolume'])
  const isTransactionAmountEnabled = containsType(['txVelocity'])
  const isThresholdDaysEnabled = containsType(['txVolume', 'txVelocity'])
  const isConsecutiveDaysEnabled = containsType(['consecutiveDays'])

  const thresholdClass = {
    [classes.error]:
      errors.threshold &&
      ((!containsType(['consecutiveDays']) && touched.threshold?.threshold) ||
        (!containsType(['txAmount']) && touched.threshold?.thresholdDays))
  }

  const isRadioGroupActive = () => {
    return (
      isThresholdCurrencyEnabled ||
      isTransactionAmountEnabled ||
      isThresholdDaysEnabled ||
      isConsecutiveDaysEnabled
    )
  }

  return (
    <>
      <Box display="flex" alignItems="center">
        <H4 className={classnames(typeClass)}>Choose trigger type</H4>
      </Box>
      <Field
        component={RadioGroup}
        name="triggerType"
        options={typeOptions}
        labelClassName={classes.radioLabel}
        radioClassName={classes.radio}
        className={classes.radioGroup}
      />

      <div className={classes.thresholdWrapper}>
        {isRadioGroupActive() && (
          <H4 className={classnames(thresholdClass, classes.thresholdTitle)}>
            Threshold
          </H4>
        )}
        <div className={classes.thresholdContentWrapper}>
          {isThresholdCurrencyEnabled && (
            <>
              <Field
                className={classes.thresholdField}
                component={NumberInput}
                size="lg"
                name="threshold.threshold"
              />
              <Info1 className={classnames(classes.description)}>
                {props.currency}
              </Info1>
            </>
          )}
          {isTransactionAmountEnabled && (
            <>
              <Field
                className={classes.thresholdField}
                component={NumberInput}
                size="lg"
                name="threshold.threshold"
              />
              <Info1 className={classnames(classes.description)}>
                transactions
              </Info1>
            </>
          )}
          {isThresholdDaysEnabled && (
            <>
              <Info1
                className={classnames(
                  typeClass,
                  classes.space,
                  classes.description
                )}>
                in
              </Info1>
              <Field
                className={classes.thresholdField}
                component={NumberInput}
                size="lg"
                name="threshold.thresholdDays"
              />
              <Info1 className={classnames(classes.description)}>days</Info1>
            </>
          )}
          {isConsecutiveDaysEnabled && (
            <>
              <Field
                className={classes.thresholdField}
                component={NumberInput}
                size="lg"
                name="threshold.thresholdDays"
              />
              <Info1 className={classnames(classes.description)}>
                consecutive days
              </Info1>
            </>
          )}
        </div>
      </div>
    </>
  )
}

const type = currency => ({
  schema: typeSchema,
  options: typeOptions,
  Component: Type,
  props: { currency },
  initialValues: {
    triggerType: '',
    threshold: { threshold: '', thresholdDays: '' }
  }
})

const requirementSchema = Yup.object().shape({
  requirement: Yup.object({
    requirement: Yup.string().required(),
    suspensionDays: Yup.number().when('requirement', {
      is: value => value === 'suspend',
      then: Yup.number()
        .required()
        .min(1),
      otherwise: Yup.number()
        .nullable()
        .transform(() => null)
    })
  }).required()
})

const requirementOptions = [
  { display: 'SMS verification', code: 'sms' },
  { display: 'ID card image', code: 'idCardPhoto' },
  { display: 'ID data', code: 'idCardData' },
  { display: 'Customer camera', code: 'facephoto' },
  { display: 'Sanctions', code: 'sanctions' },
  { display: 'US SSN', code: 'usSsn' },
  // { display: 'Super user', code: 'superuser' },
  { display: 'Suspend', code: 'suspend' },
  { display: 'Block', code: 'block' }
]

const Requirement = () => {
  const classes = useStyles()
  const { touched, errors, values } = useFormikContext()

  const titleClass = {
    [classes.error]:
      !R.isEmpty(R.omit(['suspensionDays'], errors.requirement)) ||
      (errors.requirement &&
        touched.requirement &&
        errors.requirement.suspensionDays &&
        touched.requirement.suspensionDays)
  }

  const isSuspend = values?.requirement?.requirement === 'suspend'

  return (
    <>
      <Box display="flex" alignItems="center">
        <H4 className={classnames(titleClass)}>Choose a requirement</H4>
      </Box>
      <Field
        component={RadioGroup}
        name="requirement.requirement"
        options={requirementOptions}
        labelClassName={classes.specialLabel}
        radioClassName={classes.radio}
        className={classnames(classes.radioGroup, classes.specialGrid)}
      />

      {isSuspend && (
        <Field
          className={classes.thresholdField}
          component={NumberInput}
          label="Days"
          size="lg"
          name="requirement.suspensionDays"
        />
      )}
    </>
  )
}

const requirements = {
  schema: requirementSchema,
  options: requirementOptions,
  Component: Requirement,
  initialValues: { requirement: { requirement: '', suspensionDays: '' } }
}

const getView = (data, code, compare) => it => {
  if (!data) return ''

  return R.compose(R.prop(code), R.find(R.propEq(compare ?? 'code', it)))(data)
}

// const DirectionDisplay = ({ code }) => {
//   const classes = useStyles()
//   const displayName = getView(directionOptions, 'display')(code)
//   const showCashIn = code === 'cashIn' || code === 'both'
//   const showCashOut = code === 'cashOut' || code === 'both'

//   return (
//     <div>
//       {showCashOut && <TxOutIcon className={classes.directionIcon} />}
//       {showCashIn && <TxInIcon className={classes.directionIcon} />}
//       <span className={classes.directionName}>{displayName}</span>
//     </div>
//   )
// }

const RequirementInput = () => {
  const { values } = useFormikContext()
  const classes = useStyles()

  const requirement = values?.requirement?.requirement
  const isSuspend = requirement === 'suspend'

  const display = getView(requirementOptions, 'display')(requirement)

  return (
    <Box display="flex" alignItems="baseline">
      {`${display} ${isSuspend ? 'for' : ''}`}
      {isSuspend && (
        <Field
          bold
          className={classes.suspensionDays}
          name="requirement.suspensionDays"
          component={NumberInput}
          textAlign="center"
        />
      )}
      {isSuspend && 'days'}
    </Box>
  )
}

const RequirementView = ({ requirement, suspensionDays }) => {
  const classes = useStyles()
  const display = getView(requirementOptions, 'display')(requirement)
  const isSuspend = requirement === 'suspend'

  return (
    <Box display="flex" alignItems="baseline">
      {`${display} ${isSuspend ? 'for' : ''}`}
      {isSuspend && (
        <Info2 className={classes.space} noMargin>
          {suspensionDays}
        </Info2>
      )}
      {isSuspend && 'days'}
    </Box>
  )
}

const DisplayThreshold = ({ config, currency, isEdit }) => {
  const classes = useStyles()

  const inputClasses = {
    [classes.input]: true,
    [classes.limitedInput]: config?.triggerType === 'txVelocity',
    [classes.daysInput]: config?.triggerType === 'consecutiveDays'
  }

  const threshold = config?.threshold?.threshold
  const thresholdDays = config?.threshold?.thresholdDays

  const Threshold = isEdit ? (
    <Field
      bold
      className={classnames(inputClasses)}
      name="threshold.threshold"
      component={NumberInput}
      textAlign="right"
    />
  ) : (
    <Info2 noMargin>{threshold}</Info2>
  )
  const ThresholdDays = isEdit ? (
    <Field
      bold
      className={classnames(inputClasses)}
      name="threshold.thresholdDays"
      component={NumberInput}
      textAlign="right"
    />
  ) : (
    <Info2 noMargin>{thresholdDays}</Info2>
  )

  switch (config?.triggerType) {
    case 'txAmount':
      return (
        <Box display="flex" alignItems="baseline" justifyContent="right">
          {Threshold}
          <Label2 noMargin className={classes.lastSpace}>
            {currency}
          </Label2>
        </Box>
      )
    case 'txVolume':
      return (
        <Box display="flex" alignItems="baseline" justifyContent="right">
          {Threshold}
          <Label2 noMargin className={classes.lastSpace}>
            {currency}
          </Label2>
          <Label1 noMargin className={classes.space}>
            in
          </Label1>
          {ThresholdDays}
          <Label1 noMargin className={classes.lastSpace}>
            days
          </Label1>
        </Box>
      )
    case 'txVelocity':
      return (
        <Box display="flex" alignItems="baseline" justifyContent="right">
          {Threshold}
          <Label1 className={classes.space} noMargin>
            transactions in
          </Label1>
          {ThresholdDays}
          <Label1 className={classes.lastSpace} noMargin>
            days
          </Label1>
        </Box>
      )
    case 'consecutiveDays':
      return (
        <Box display="flex" alignItems="baseline" justifyContent="right">
          {ThresholdDays}
          <Label1 className={classes.lastSpace} noMargin>
            days
          </Label1>
        </Box>
      )
    default:
      return ''
  }
}

const ThresholdInput = memo(({ currency }) => {
  const { values } = useFormikContext()

  return <DisplayThreshold isEdit={true} config={values} currency={currency} />
})

const ThresholdView = ({ config, currency }) => {
  return <DisplayThreshold config={config} currency={currency} />
}

const getElements = (currency, classes) => [
  {
    name: 'triggerType',
    size: 'sm',
    width: 230,
    input: ({ field: { value: name } }) => (
      <>{getView(typeOptions, 'display')(name)}</>
    ),
    view: getView(typeOptions, 'display'),
    inputProps: {
      options: typeOptions,
      valueProp: 'code',
      labelProp: 'display',
      optionsLimit: null
    }
  },
  {
    name: 'requirement',
    size: 'sm',
    width: 230,
    bypassField: true,
    input: RequirementInput,
    view: it => <RequirementView {...it} />
  },
  {
    name: 'threshold',
    size: 'sm',
    width: 284,
    textAlign: 'right',
    input: () => <ThresholdInput currency={currency} />,
    view: (it, config) => <ThresholdView config={config} currency={currency} />
  }
  // {
  //   name: 'direction',
  //   size: 'sm',
  //   width: 282,
  //   view: it => <DirectionDisplay code={it} />,
  //   input: RadioGroup,
  //   inputProps: {
  //     labelClassName: classes.tableRadioLabel,
  //     className: classes.tableRadioGroup,
  //     options: directionOptions2
  //   }
  // }
]

const triggerOrder = R.map(R.prop('code'))(typeOptions)
const sortBy = [
  R.comparator(
    (a, b) =>
      triggerOrder.indexOf(a.triggerType) < triggerOrder.indexOf(b.triggerType)
  )
]

const fromServer = triggers =>
  R.map(
    ({ requirement, suspensionDays, threshold, thresholdDays, ...rest }) => ({
      requirement: {
        requirement,
        suspensionDays
      },
      threshold: {
        threshold,
        thresholdDays
      },
      ...rest
    })
  )(triggers)

const toServer = triggers =>
  R.map(({ requirement, threshold, ...rest }) => ({
    requirement: requirement.requirement,
    suspensionDays: requirement.suspensionDays,
    threshold: threshold.threshold,
    thresholdDays: threshold.thresholdDays,
    ...rest
  }))(triggers)

export {
  Schema,
  getElements,
  // txDirection,
  type,
  requirements,
  sortBy,
  fromServer,
  toServer,
  getView,
  requirementOptions
}