/*
 * Copyright 2020 The Magma Authors.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * @flow strict-local
 * @format
 */
import type {DataRows} from '../../components/DataGrid';
import type {network_epc_configs} from '@fbcnms/magma-api';

import Button from '@material-ui/core/Button';
import DataGrid from '../../components/DataGrid';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import FormLabel from '@material-ui/core/FormLabel';
import IconButton from '@material-ui/core/IconButton';
import InputAdornment from '@material-ui/core/InputAdornment';
import List from '@material-ui/core/List';
import ListItemText from '@material-ui/core/ListItemText';
import LteNetworkContext from '../../components/context/LteNetworkContext';
import MenuItem from '@material-ui/core/MenuItem';
import OutlinedInput from '@material-ui/core/OutlinedInput';
import React from 'react';
import Select from '@material-ui/core/Select';
import Visibility from '@material-ui/icons/Visibility';
import VisibilityOff from '@material-ui/icons/VisibilityOff';

import {AltFormField} from '../../components/FormField';
import {useContext, useState} from 'react';
import {useEnqueueSnackbar} from '@fbcnms/ui/hooks/useSnackbar';

type Props = {
  epcConfigs: network_epc_configs,
};

export default function NetworkEpc(props: Props) {
  const kpiData: DataRows[] = [
    [
      {
        category: 'Policy Enforcement Enabled',
        value: props.epcConfigs?.hss_relay_enabled ? 'Enabled' : 'Disabled',
      },
    ],
    [
      {
        category: 'LTE Auth AMF',
        value: props.epcConfigs?.lte_auth_amf,
        obscure: true,
      },
    ],
    [
      {
        category: 'MCC',
        value: props.epcConfigs?.mcc,
      },
    ],
    [
      {
        category: 'MNC',
        value: props.epcConfigs?.mnc,
      },
    ],
    [
      {
        category: 'TAC',
        value: props.epcConfigs?.tac,
      },
    ],
  ];

  return <DataGrid data={kpiData} testID="epc" />;
}

type EditProps = {
  saveButtonTitle: string,
  networkId: string,
  epcConfigs: ?network_epc_configs,
  onClose: () => void,
  onSave: network_epc_configs => void,
};

export function NetworkEpcEdit(props: EditProps) {
  const [showPassword, setShowPassword] = React.useState(false);
  const enqueueSnackbar = useEnqueueSnackbar();
  const [error, setError] = useState('');
  const ctx = useContext(LteNetworkContext);

  const [epcConfigs, setEpcConfigs] = useState<network_epc_configs>(
    props.epcConfigs == null || Object.keys(props.epcConfigs).length === 0
      ? {
          cloud_subscriberdb_enabled: false,
          default_rule_id: 'default_rule_1',
          lte_auth_amf: 'gAA=',
          lte_auth_op: 'EREREREREREREREREREREQ==',
          mcc: '001',
          mnc: '01',
          network_services: ['policy_enforcement'],
          hss_relay_enabled: false,
          gx_gy_relay_enabled: false,
          sub_profiles: {},
          tac: 1,
        }
      : props.epcConfigs,
  );
  const onSave = async () => {
    try {
      await ctx.updateNetworks({networkId: props.networkId, epcConfigs});
      props.onSave(epcConfigs);
      enqueueSnackbar('EPC configs saved successfully', {variant: 'success'});
    } catch (e) {
      setError(e.response?.data?.message ?? e?.message);
    }
  };

  return (
    <>
      <DialogContent data-testid="networkEpcEdit">
        {error !== '' && (
          <AltFormField label={''}>
            <FormLabel error>{error}</FormLabel>
          </AltFormField>
        )}
        <List>
          <AltFormField label={'Policy Enforcement Enabled'}>
            <Select
              variant={'outlined'}
              value={epcConfigs.hss_relay_enabled ? 1 : 0}
              onChange={({target}) => {
                setEpcConfigs({
                  ...epcConfigs,
                  relay_enabled: target.value === 1,
                });
              }}
              input={<OutlinedInput id="relayEnabled" />}>
              <MenuItem value={0}>
                <ListItemText primary={'Disabled'} />
              </MenuItem>
              <MenuItem value={1}>
                <ListItemText primary={'Enabled'} />
              </MenuItem>
            </Select>
          </AltFormField>
          <AltFormField label={'LTE Auth AMF'}>
            <OutlinedInput
              data-testid="password"
              placeholder="Enter Auth AMF"
              type={showPassword ? 'text' : 'password'}
              fullWidth={true}
              value={epcConfigs.lte_auth_amf}
              onChange={({target}) => {
                setEpcConfigs({...epcConfigs, lte_auth_amf: target.value});
              }}
              endAdornment={
                <InputAdornment position="end">
                  <IconButton
                    aria-label="toggle password visibility"
                    onClick={() => setShowPassword(!showPassword)}
                    onMouseDown={event => event.preventDefault()}>
                    {showPassword ? <Visibility /> : <VisibilityOff />}
                  </IconButton>
                </InputAdornment>
              }
            />
          </AltFormField>
          <AltFormField label={'MCC'}>
            <OutlinedInput
              data-testid="mcc"
              placeholder="Enter MCC"
              fullWidth={true}
              value={epcConfigs.mcc}
              onChange={({target}) =>
                setEpcConfigs({...epcConfigs, mcc: target.value})
              }
            />
          </AltFormField>
          <AltFormField label={'MNC'}>
            <OutlinedInput
              data-testid="mnc"
              placeholder="Enter MNC"
              fullWidth={true}
              value={epcConfigs.mnc}
              onChange={({target}) =>
                setEpcConfigs({...epcConfigs, mnc: target.value})
              }
            />
          </AltFormField>
          <AltFormField label={'TAC'}>
            <OutlinedInput
              data-testid="tac"
              placeholder="Enter TAC"
              type="number"
              fullWidth={true}
              value={epcConfigs.tac}
              onChange={({target}) =>
                setEpcConfigs({...epcConfigs, tac: parseInt(target.value)})
              }
            />
          </AltFormField>
        </List>
      </DialogContent>
      <DialogActions>
        <Button onClick={props.onClose} skin="regular">
          Cancel
        </Button>
        <Button onClick={onSave} variant="contained" color="primary">
          {props.saveButtonTitle}
        </Button>
      </DialogActions>
    </>
  );
}
